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

onClick event assignment using document.getElementById

  • 772

Code

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>

Goal

The variable arreglocontains a list of HTML elements, which are previously obtained using document.getElementById(). Later I want to dynamically assign an event to the HTML element using the .onclickDOM Element property.

What I want is that when clicking on any of the elements <a>, a function is displayed alert()or a function is executed showing the text contained in them.

Problem

In this section of the code:

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

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

I get the element contained in the variable arreglo, and later I get its value innerHTML, that is, the text it contains, then I assign the attribute onclickby assigning an anonymous function that will execute a alert()showing the text that contains the HTML element.

But clicking on any of the elements always prints the innerHTMLlast element, in this case it is the word "three". When should be the value of each element individually.

Ask

How can an event be assigned onClick()to an element obtained with document.getElementById()?

Note

It should be clarified that I must solve the problem using pure JavaScript , it does not help me to use a library like jQuery or others, since in said environment I cannot use it.

javascript

4 Answers

  1. Best Answer

    The problem occurs due to scope/scope issues. Remember:

    A variable declared with varalways has a function scope or a global scope. Any variable declared inside a function, whether or not inside a block or structure, always applies to hoisting .

    hosting example

    // 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
})();

    As you can see, in the first example, xit is still available even outside the for loop, this happens because the ES5 variables undergo a different process when they are declared; this doesn't happen in ES6 with letand const.

    In your code, the variable texto, being of function scope, always stores the last reference assigned to it , that is, the text of the last element of the array. What you should do is use a closure or use 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 each iteration that it does for, the value of the variable is written texto. Try accessing the element itself with thisand thus reading the content:

    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. Using a Closure :

    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>

    Why doesn't the original code work?

    The function you have defined for the event onClickreads the value of the external variable textoat run time, instead of copying its value when the function is defined. Any subsequent modification of the external variable affects the execution of the function.

    • 4

  4. Try displaying the text with something thislike this:

    ...

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

    var elemento = arreglo[i];

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

  }
    • 3