Consistent value displayed by addEventListener for each event

Question

Consistent value displayed by addEventListener for each event

Hey everyone, I've been experimenting with different solutions for a few hours now but I'm still stuck on this problem. I have a function that takes JSON as input -

I can create an 'a' element: CHECK I can set all the element properties like 'href': CHECK I can append 'a' with required element tags: CHECK But I am unable to set the

a.addEventListener("click", function () { alert("clicked - " + a.id) }, false);

Every time I click on any href, it displays the last value

function setTags(tagsJson) {

    var obj = JSON.parse(tagsJson); 
    var a = null;
    var linkText = null; 
    for (var i = 0; i < obj.length; i++) {
        if (typeof (obj[i].Tag_name) === 'undefined' || obj[i].Tag_name === null) {
           // DO NOTHING
        }
        else
        {   a = document.createElement('a');
            linkText = document.createTextNode(obj[i].Tag_name);
            a.appendChild(linkText);            
            a.href = "#";               
            a.textContent = obj[i].Tag_name;
            a.className = "badge badge-success";                                      
            document.getElementById("tags").appendChild(a);

          // THE ISSUE LIES HERE
            a.addEventListener("click", function () { alert("clicked - " + a.textContent) }, false); 

       }
     }
}

For example, if the JSON contains the following values

{\"Tag_id\":12,\"Tag_name\":\"Aston Martin\"},{\"Tag_id\":13,\"Tag_name\":\"Cars\"}]"}

It should display unique text in 'textContent' such as 'Aston Martin', 'Aston' and 'Cars' but when clicking on any item, the alert only shows Cars even though the link's text displays the correct values.

https://i.sstatic.net/OiwO2.png

Based on the screenshot above, the text values seem fine, but the addEventListener only displays the last value on CLICK

I believe there is something I am not grasping about addEventListener?

How can I resolve this issue?

Cheers

javascript json google-chrome-extension

Answer 1

Answer №1

Swap out a.textContent for this.textContent

a.addEventListener("click", function () { alert("clicked - " + this.textContent) }, false);

At the point when this event handler is triggered, the for-loop has already completed its iterations until i < obj.length condition is met, causing a to always be the last one.

Answer 2

Swap out a.textContent for this.textContent

a.addEventListener("click", function () { alert("clicked - " + this.textContent) }, false);

At the point when this event handler is triggered, the for-loop has already completed its iterations until i < obj.length condition is met, causing a to always be the last one.

Answer 3

Answer №2

Upon clicking the item, the function will be triggered, retrieving the variable a which is defined outside of the for loop. The value of a will hold the last item from the loop.

To improve the functionality, consider utilizing the current context within the function by referencing this.

a.addEventListener("click", function () { alert("clicked - " + this.textContent) }, false);

Answer 4

Upon clicking the item, the function will be triggered, retrieving the variable a which is defined outside of the for loop. The value of a will hold the last item from the loop.

To improve the functionality, consider utilizing the current context within the function by referencing this.

a.addEventListener("click", function () { alert("clicked - " + this.textContent) }, false);

Answer 5

Answer №3

The reason behind this issue is related to the way the alert function is written:

a.addEventListener("click", function(){
    alert("clicked - " + a.textContent);  // <---- THIS LINE
}, false);

When using a.textContent in the code snippet above, it will retrieve the value of textContent from the element a.

In your current setup, the value of a is being updated in each loop iteration. Consequently, when the function references a, it will always use the value of a from the last loop. Hence, only the last value of a will be displayed.

To resolve this issue, you have two alternative methods to access the a.textContent within the function:

Method One: Utilize event.target

a.addEventListener("click", function(event){
    alert("clicked - " + event.target.textContent);
}, false);

Method Two: Implement this

a.addEventListener("click", function(){
    alert("clicked - " + this.textContent);
}, false);

Example demonstrating the solution

var json = "[{\"Tag_id\":12,\"Tag_name\":\"Aston Martin\"},{\"Tag_id\":13,\"Tag_name\":\"Cars\"}]";

setTags(json);

function setTags(tagsJson) {

    var obj = JSON.parse(tagsJson); 
    var a = null;
    var linkText = null; 
    for (var i = 0; i < obj.length; i++) {
        if (typeof obj[i].Tag_name === 'undefined' || obj[i].Tag_name === null) {
           // DO NOTHING
        }
        else
        {   a = document.createElement('a');
            linkText = document.createTextNode(obj[i].Tag_name);
            a.appendChild(linkText);            
            a.href = "#";               
            a.textContent = obj[i].Tag_name;
            a.className = "badge badge-success";                                      
            document.getElementById("tags").appendChild(a);

          // THE SOLUTION LIES HERE
            a.addEventListener("click", function () { alert("clicked - " + this.textContent) }, false); 

       }
     }
}

a {
  display: block;
}

<div id="tags"></div>

Answer 6

The reason behind this issue is related to the way the alert function is written:

a.addEventListener("click", function(){
    alert("clicked - " + a.textContent);  // <---- THIS LINE
}, false);

When using a.textContent in the code snippet above, it will retrieve the value of textContent from the element a.

In your current setup, the value of a is being updated in each loop iteration. Consequently, when the function references a, it will always use the value of a from the last loop. Hence, only the last value of a will be displayed.

To resolve this issue, you have two alternative methods to access the a.textContent within the function:

Method One: Utilize event.target

a.addEventListener("click", function(event){
    alert("clicked - " + event.target.textContent);
}, false);

Method Two: Implement this

a.addEventListener("click", function(){
    alert("clicked - " + this.textContent);
}, false);

Example demonstrating the solution

var json = "[{\"Tag_id\":12,\"Tag_name\":\"Aston Martin\"},{\"Tag_id\":13,\"Tag_name\":\"Cars\"}]";

setTags(json);

function setTags(tagsJson) {

    var obj = JSON.parse(tagsJson); 
    var a = null;
    var linkText = null; 
    for (var i = 0; i < obj.length; i++) {
        if (typeof obj[i].Tag_name === 'undefined' || obj[i].Tag_name === null) {
           // DO NOTHING
        }
        else
        {   a = document.createElement('a');
            linkText = document.createTextNode(obj[i].Tag_name);
            a.appendChild(linkText);            
            a.href = "#";               
            a.textContent = obj[i].Tag_name;
            a.className = "badge badge-success";                                      
            document.getElementById("tags").appendChild(a);

          // THE SOLUTION LIES HERE
            a.addEventListener("click", function () { alert("clicked - " + this.textContent) }, false); 

       }
     }
}

a {
  display: block;
}

<div id="tags"></div>

Answer 7

Answer №4

This example illustrates a common mistake involving closures.

The issue lies in declaring the variable a outside of both the for loop and the click callback function. This results in a being overwritten during each iteration of the loop. Consequently, whenever the click function is called, a will be assigned the value set during the last iteration of the loop.

Therefore, in this scenario, you will always see:

a.textContent = obj[obj.length - 1].Tag_name;

To correct this behavior and achieve the intended functionality, you should retrieve the <a> element from the click event itself. This can be accomplished as follows:

a.addEventListener("click", function (event) { // Using the event to identify the clicked element
   const a = document.getElementById(event.target.id); // Accessing the clicked element
   alert("clicked - " + a.textContent)
}, false);

Answer 8

This example illustrates a common mistake involving closures.

The issue lies in declaring the variable a outside of both the for loop and the click callback function. This results in a being overwritten during each iteration of the loop. Consequently, whenever the click function is called, a will be assigned the value set during the last iteration of the loop.

Therefore, in this scenario, you will always see:

a.textContent = obj[obj.length - 1].Tag_name;

To correct this behavior and achieve the intended functionality, you should retrieve the <a> element from the click event itself. This can be accomplished as follows:

a.addEventListener("click", function (event) { // Using the event to identify the clicked element
   const a = document.getElementById(event.target.id); // Accessing the clicked element
   alert("clicked - " + a.textContent)
}, false);

Answer 9

Answer №5

Encountering the function binding issue after a for-loop

for (var i = 0;i<10;i ++){
    aLis[i].onclick = (function(num){
      return function(){
        alert(num)
      };                        
    })(i);    
}

Take a look at this :

http://jsbin.com/liyeqamone/5/edit?html,js,console,output

Answer 10

Encountering the function binding issue after a for-loop

for (var i = 0;i<10;i ++){
    aLis[i].onclick = (function(num){
      return function(){
        alert(num)
      };                        
    })(i);    
}

Take a look at this :

http://jsbin.com/liyeqamone/5/edit?html,js,console,output

Consistent value displayed by addEventListener for each event

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

perform the .then() function within a returned promise

In the realm of asp.net, the OnClick event springs into action after the

Can text be inserted into an SWF file using ASP.NET or Javascript via an online platform?

What is the proper way to bind CoreUI's CSwitch component?

If the element is checked and equal to a specific value, take action

Encountering an error while attempting to add class-constructed objects to an array list in React/NextJs: "Unable to add property 0, as the object is

Numerous sections with tabs on the webpage

The canvas loadFromJson function fails to implement the font-family property

Tips for sending a JavaScript object from PHP to AJAX

The browser has blocked access to XMLHttpRequest from a specific origin due to the absence of the 'Access-Control-Allow-Origin' header in the requested resource

When using React, appending a React Link tag to an existing list item may result in the addition of two objects instead of the desired

Adjust the appearance of a div according to the input value

Locate a deeply nested element within an array of objects using a specific string identifier

Comparing react-intl and react-i18next for internationalizing ReactJS applications

Grails 3.1.9 does not support displaying JavaScript

Inform jQuery that the draggable element is in the process of being dragged dynamically

Testing the JSON ModelBinding functionality in Nancy was a unit testing priority

View JSON-formatted information

What is the process for importing an md file in a create-react-app project using JavaScript?

Exploring the contrast: resolve() versus fulfill() in q.js