Home / Questions / 92011
Accepted
Ivan Botero
Asked: 2020-08-02 05:05:45 +0800 CST 2020-08-02 05:05:45 +0800 CST

使用 document.getElementById 分配 onClick 事件

  • 772

代码

function asignarEventos() {

  var uno = document.getElementById("uno");
  var dos = document.getElementById("dos");
  var tres = document.getElementById("tres");

  var arreglo = [uno, dos, tres];

  for (var i = 0; i < arreglo.length; i++) {

    var elemento = arreglo[i];
    var texto = elemento.innerHTML.trim();

    elemento.onclick = function(){
      alert(texto);
    };

  }

}

asignarEventos();
<html>

<head>
</head>

<body>

  <a id="uno">
    Uno
  </a>

  <a id="dos">
    Dos
  </a>

  <a id="tres">
    Tres
  </a>

</body>

</html>

目标

该变量arreglo包含一个 HTML 元素列表，这些元素之前使用document.getElementById(). 稍后我想使用.onclickDOM Element 属性为 HTML 元素动态分配一个事件。

我想要的是，当单击任何元素<a>时，会显示alert()一个函数或执行一个函数，以显示其中包含的文本。

问题

在这部分代码中：

var elemento = arreglo[i];
var texto = elemento.innerHTML.trim();

elemento.onclick = function(){
  alert(texto);
};

我得到变量中包含的元素arreglo，然后我得到它的值innerHTML，即它包含的文本，然后我onclick通过分配一个匿名函数来分配属性，该函数将执行一个alert()显示包含 HTML 元素的文本。

但是单击任何元素总是会打印innerHTML最后一个元素，在这种情况下是单词“三”。何时应该是每个元素的值。

问

如何将事件分配onClick()给使用 获得的元素document.getElementById()？

笔记

应该澄清的是，我必须使用纯 JavaScript 解决问题，使用 jQuery 或其他库等库对我没有帮助，因为在上述环境中我无法使用它。

javascript

4 Answers

  1. Best Answer

    由于范围/范围问题而出现问题。记住：

    用 声明的变量var始终具有函数作用域或全局作用域。在函数内声明的任何变量，无论是否在块或结构内，始终适用于提升。

    托管示例

    // ES5
(function() {
  for (var i = 0; i < 3; i++) {
    var x = i;
  }
  console.log(x);
})();

// ES6
(() => {
  for (let i = 0; i < 3; i++) {
    let y = i;
  }
  console.log(y); // error
})();

    如您所见，在第一个示例中，x即使在 for 循环之外它仍然可用，这是因为 ES5 变量在声明时经历了不同的过程；这在 ES6 中不会发生letand const。

    在您的代码中，texto属于函数范围的变量始终存储分配给它的最后一个引用，即数组最后一个元素的文本。您应该做的是使用闭包或使用letor const。

    function asignarEventos() {
  var arreglo = Array.from(document.querySelectorAll('a[id]'));

  for (var i = 0; i < arreglo.length; i++) {
    var elemento = arreglo[i];
    const texto = elemento.innerHTML.trim();
    elemento.onclick = function() {
      alert(texto);
    };
  }
}

asignarEventos();
    <body>
  <a id="uno">
    Uno
  </a>
  <a id="dos">
    Dos
  </a>
  <a id="tres">
    Tres
  </a>
</body>

    • 8

  2. 对于它执行的每次迭代，for都会写入变量的值texto。尝试访问元素本身this并阅读内容：

    function asignarEventos() {

  var uno = document.getElementById("uno");
  var dos = document.getElementById("dos");
  var tres = document.getElementById("tres");

  var arreglo = [uno, dos, tres];

  for (var i = 0; i < arreglo.length; i++) {

    var elemento = arreglo[i];
    
    elemento.onclick = function(){
      alert(this.innerHTML.trim());
    };

  }

}

asignarEventos();
    <html>

<head>
</head>

<body>

  <a id="uno">
    Uno
  </a>

  <a id="dos">
    Dos
  </a>

  <a id="tres">
    Tres
  </a>

</body>

</html>

    • 6

  3. 使用闭包：

    function asignarEventos() {

  var uno = document.getElementById("uno");
  var dos = document.getElementById("dos");
  var tres = document.getElementById("tres");

  var arreglo = [uno, dos, tres];

  for (var i = 0; i < arreglo.length; i++) {

  var elemento = arreglo[i];

  elemento.onclick = function(elem){
	return function(){
	   alert(elem.innerHTML.trim());
	}
  }(elemento);

  }

}

asignarEventos();
    <html>

<body load="">

  <a id="uno">
Uno
  </a>

  <a id="dos">
Dos
  </a>

  <a id="tres">
Tres
  </a>

</body>

</html>

    为什么原始代码不起作用？

    您为事件定义的函数在运行时onClick读取外部变量的值texto，而不是在定义函数时复制其值。外部变量的任何后续修改都会影响函数的执行。

    • 4

  4. 尝试使用以下内容显示文本this：

    ...

for (var i = 0; i < arreglo.length; i++) {

    var elemento = arreglo[i];

    elemento.onclick = function(){
      alert(this.innerHTML.trim());
    };

  }
    • 3