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

Назначение события onClick с использованием document.getElementById

  • 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(). Позже я хочу динамически назначить событие HTML-элементу, используя .onclickсвойство DOM Element.

Я хочу, чтобы при нажатии на любой из элементов <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

    Проблема возникает из-за проблем с областью/областью. Запомнить:

    Переменная, объявленная with 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 с letи const.

    В вашем коде переменная texto, будучи областью видимости функции, всегда хранит последнюю присвоенную ей ссылку , то есть текст последнего элемента массива. Что вы должны сделать, это использовать закрытие или использовать letили 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