Question

我一直试图让“this”工作，将它绑定到应用该函数的/任何HTML元素。我试图保持它的通用性，以便可以将相同的函数应用于多个HTML元素。

注意：

我不想弄乱ID和类等等，因为我希望尽可能保持函数的通用性。

<!doctype html>
<html>
<body>

<input type="button" value="Old" onClick="Change(this);">

<script type="text/javascript">
function Change(){
     this.innerHTML = "New";
};
</script>

</body>
</html>

Answer 1

innerHTML在这种情况下不起作用。由于这是输入，请尝试使用value。

var input = document.querySelector('input');

input.addEventListener('click', Change);
    
function Change(){
  this.value = "New";
  this.removeEventListener('click', Change);
}

<input type="button" value="Old" />

Answer 2

问题是，当页面点击input时，Change函数未定义。请尝试以下方法：

<!doctype html>
<html>
<body>

<script type="text/javascript">
function Change(){
     this.value = "New";
};
</script>

<input type="button" value="Old" onClick="Change.call(this);">

</body>
</html>

请注意，我已将input＆＃39; onClick更改为Change.call(this)。并且脚本在控件之前加载。

您可以看到working fiddle here.请注意，JavaScript设置已配置，以便脚本加载到头部（在JavaScript部分中点击cog）。

将.this绑定到HTML元素

2 个答案: