How to insert a button with a variable id to HTML code

Hi. I need to insert a button with a variable id. For example, there is a loop that will create several buttons in the panel.
In my script, I have a line like:

var table=document.getElementById("data-table");
var newRow = table.insertRow(length);
.
.
var cell3 = newRow.insertCell(2);
cell3Content = document.createTextNode("< input type="button" value="Edit" class="edit" id='edit-button"+i+"' >");
 cell3.innerHTML = cell3Content; 

Where the i that is in the id of the button is variable I get an error when I run the extension. But when I remove this variable, everyting seems fine. What am I missing?

Well, at least in the code you posted, i is not declared as a variable.

1 Like

It is not because of the i. looks like this. The problem does not appear when I open the HTML file from the browser. But it appears when I run the extension using jpm. I get this error: ReferenceError: editRow is not defined. When I print the HTML code using console.innerHTML(table) I see the HTML with double quotes outside the onclick despite my script trying to make it single. Can you help me?

You can try this script:

var info = [{
  "firstName": "aaa",
  "lastName": "A"
}, {
  "firstName": "bbb",
  "lastName": "B"
}, {
  "firstName": "ccc",
  "lastName": "C"
}];
var table = document.getElementById("table");
var storageLength = info.length;

for (var i = 0; i < info.length; i++) {
  var row = table.insertRow(i + 1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  cell1.innerHTML = info[i].firstName;
  cell2.innerHTML = info[i].lastName;

  var editButtonHTML = "<input type=button value=Edit class=edit id=edit-button" + (i + 1) + " onclick=\'editRow(" + (i + 1) + ")\'>";

  cell3.innerHTML = editButtonHTML;
} //end for
   //Made an edit here
function editRow(rowindex)
{
    console.log("inside editRow "+(rowindex));
}

This is a simple HTML:

<table id="table" border='1'>
  <tr></tr>
</table>

Also, feel free to suggest any other way to achieve the same thing. Attaching a listener to the button with index i.

I also tried this after the button but did not work. the getElement returns null.

butId="edit-button"+(i+1);
	console.log("button id is: "+butId);
	
	document.getElementById(butId).addEventListener('click',editRow);

Did you ever check with the inspector if the elements was created on the webpage and what are the assigned attributes of the button? If not, please do it.

I would recommend to use createElement() to create the buttons and set with setAttribute() the id attribute with the dynamic name. Then append the button at the needed position.

Yes. The HTML code is ok except that the onclick appears with double quotation not single. Can you provide the syntax for your solution I am new to this.

It does not work. I tried this inside the loop but the problem, I get the last i value in all buttons. I need each button to pass its associated row i value. e.g., button in row#1, should send argument 1.

  var editbtn = document.createElement('button');        // Create a <button> element
	editbtn.type= "button";
    	editbtn.className= "editbtn";
    	editbtn.id= "button-"+(i+1);
    	editbtn.innerHTML= "Edit";
    	editbtn.onclick = function editRow(i+1){console.log("inside edit row");}; //function() {console.log("Hi"+(i+1));};
        cell3.appendChild(editbtn);

You should use addEventListener() instead onclick. Why should the button know the value of “i” in just the moment if you click the button? The button was setup and “i” is gone.

You can extract the value from the id or you set the value in a data-id attribute and access this via “this” within the onclick function.

editbtn.id= “button-”+(i+1); // editbtn.setAttribute(“data-id”, (i+1));

editbtn.addEventListener(“click”,function(evt){console.log(this.id)});
//editbtn.addEventListener(“click”,function(evt){console.log(this.getAttribute(“data-id”))});

First of, if you post code, you must unclude the declaration of all variables. In the code above you are omitting the declaration of i again.

You are really struggling with fundamental JavaScript stuff. What you are probably getting wrong in the last snipped is related to your initial mistake (probably, that is. Impossible to tell for sure without all the relevant code).
If you understand scoping and closures (this quite old article might be a place to start), you should be able to solve this on your own. If you are unable to wrap your head around that, you will never be able to produce decent JavaScript code.

Hi, hoping that it will help
https://jsfiddle.net/Kazo/3okqd9z8/

To sum up, the event.target is the object clicked by the user, so you can do whatever you want from that

good luck for your next step :slight_smile: