Creating unique Id buttons in a javascript loop

Question

I need to create a table populated with buttons. Each button must have a unique id in order to edit values in it's row. I set an alert displaying button's id on click, but all created buttons seem to have the same ID. What's wrong with my code? plz help, im really newbie in js. Any help will be highly appreciated.

this is my code:

<!doctype html>
<html>
<head>
<title>js table</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>


<body>

<table id="TableA" dir="ltr" width="500" border="1">  
<tr>
<td>Old top row</td>
</tr>
</table>

</body>

<script type="text/javascript" >


for (var i = 0; i<6; i++) {

    // Get a reference to the table
    var tableRef = document.getElementById("TableA");

    // Insert a row in the table at row index 0
    var newRow   = tableRef.insertRow(0);

    // Insert a cell in the row at index 0
    var boton  = newRow.insertCell(0);

    // Append a text node to the cell
    var newButton  = document.createElement("BUTTON");
    newButton.id = i;

    newButton.innerHTML = "Unique id button";
    boton.appendChild(newButton);


    // Insert a cell in the row at index 0
    var newCell  = newRow.insertCell(0);

    // Append a text node to the cell
    var newText  = document.createElement("P");
    newText.innerHTML = "item" +" "+ i;
    newCell.appendChild(newText);

    newButton.onclick = function(){
    alert("Button Id: " + newButton.id);
    }


}

</script>

The code runs fine for me and the buttons are numbered correctly: jsfiddle.net/btemdopw — Mario Tacke
– Mario Tacke, Commented Apr 10, 2016 at 16:31
All the buttons have been assigned different IDs, you are displaying values wrongly. Try alert(this.id) instead of newButton.id . — Sachin Gadagi
– Sachin Gadagi, Commented Apr 10, 2016 at 16:32

jfriend00 · Accepted Answer · 2016-04-10 16:28:18Z

Change your client handler to refer to the actual button that was clicked. Change from this:

newButton.onclick = function(){
    alert("Button Id: " + newButton.id);
}

to this:

newButton.addEventListener("click", function(e) {
    alert("Button Id: " + this.id);
});

The variable newButton is used over and over again in your for loop so by the time any of your onclick handlers actually run, all the buttons have been created and newButton will contain the last value it ever had.

Instead, you can use this to refer to the element that was clicked on so this.id will the id value of the button that was clicked.

Note: I also switch to using .addEventListener() which also passes an event data structure to the event handler (shown as the e argument in my code). This is a generally better way to register event listeners as it allows multiple listeners and gives you automatic access to other info about the event that occurred.

Collectives™ on Stack Overflow

Creating unique Id buttons in a javascript loop

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related