javascript 代码中显示的 this.value 未定义消息答案

【问题标题】：this.value undefined message showin in javascript codejavascript 代码中显示的 this.value 未定义消息
【发布时间】：2019-04-21 08:45:24
【问题描述】：

changeText1(id) 显示未定义的错误我想要锚标记属性中的值

function changeText(id) {
  id.innerHTML = "hii";
}

function changeText1(id) {
  var idq = this.value;
  id.innerHTML = idq;
}

<!DOCTYPE html>
<html>
<body>
  <h1 onclick="changeText(this)">Click on this text!</h1>
  <h1><a onclick="changeText1(this)" value="123">Click on this text!</a></h1>
</body>
</html>

【问题讨论】：

点击此文本！

点击这段文字！
你能删除你的评论吗？它不属于这里。
value 仅对输入元素有意义，而不是 <a> 或 <h1>。
在 <a> 中删除 value 并删除 var idq = this.value;，并将 id.innerHTML = idq; 更改为 id.innerHTML = '123';，因为您已经知道该值。即使您不知道 vars 的价值。

标签： javascript html attributes getattribute

【解决方案1】：

要从锚标签中获取价值，您必须这样做

function changeText1(param) {
  var val = param.getAttribute('value'); // ATTRIBUTE-NAME
  param.innerHTML = val;
}

【讨论】：

【解决方案2】：

您需要使用getAttribute 才能访问非标准属性。

这与this的移交值结合使用，即函数中的id。

为了更好地理解代码，建议将此变量重命名为element。

function changeText(element) {
    element.innerHTML = "hii";
}

function changeText1(element) {
    element.innerHTML = element.getAttribute('value');
}

<h1 onclick="changeText(this)">Click on this text!</h1>
<h1><a onclick="changeText1(this)" value="123">Click on this text!</a></h1>

【讨论】：

【解决方案3】：

请使用以下函数更新您的 changeText1 函数。可能你不能直接获取任何属性。

function changeText1(id) { 
    var idq = id.getAttribute("value");
    id.innerHTML = idq;
}

【讨论】：

【解决方案4】：

value 不是锚元素的有效属性。如果您想在元素中存储应用程序数据，请使用data-* 属性，并使用dataset 属性访问它。

function changeText(id) {
  id.innerHTML = "hii";
}

function changeText1(id) {
  var idq = id.dataset.value;
  id.innerHTML = idq;
}

<!DOCTYPE html>
<html>
<body>
  <h1 onclick="changeText(this)">Click on this text!</h1>
  <h1><a onclick="changeText1(this)" data-value="123">Click on this text!</a></h1>
</body>
</html>

另外，你写了this.value，而它应该是id.value。但是解决这个问题并不能解决问题。

【讨论】：

【解决方案5】：

锚标记没有名为value 的属性。您可以使用data 来存储一个值。其次，您可以对这两个任务使用单个函数。

   
function changeText(e) {
  // get the current element which is clicked
  let elem = e.target;
  // check if the current element have any dataset with value as a key
  if (elem.dataset.value) {
    elem.innerHTML = elem.dataset.value;
    return;
  }
  elem.innerHTML = "hii";
}

// event is the event object
// value in data-value can be replaced by anything,but prefix data- is necessary 
<h1 onclick="changeText(event)">Click on this text!</h1>
<h1><a onclick="changeText(event)" data-value="123">Click on this text!</a></h1>

【讨论】：

点击此文本！

点击这段文字！