Setting the element class in html element created by javascript

Question

I am creating a html table by javascript, but I can't set the class name to these elements.

What I want: clicking on the one of the inputs in the second column activates function. For example, this function set the <p> color to red.

I was trying many solutions, but it's still not working.

HTML:

<div id="table"></div> 
<p id="a">adasd</p>

JS:

var arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"];

var table = "<table><tr><td><b>Test</b></td>";
table += "<td style='width: 50px'>RN</td>";
table += "<td style='width: 50px'>MW</td></tr>";

for (var i=0; i<arr.length; i++) {
    table += "<td>" + arr[i] + "</td>";
    table += "<td><input class='rn' style='width: 50px'></input></td>";
    table += "<td><input style='width: 50px'></input></td></tr>";
}

table += "</table>";

document.querySelectorAll('.rn').onclick = function() {change()};

function change() {
    document.getElementById("a").style.color = "red";
}
document.getElementById("table").innerHTML = table;

does the answer solve your problem ?

Neji Soltani
– Neji Soltani

2017-11-19 15:41:35 +00:00
Commented Nov 19, 2017 at 15:41 — Neji Soltani
– Neji Soltani, Commented Nov 19, 2017 at 15:41

1stthomas · Accepted Answer · 2017-11-19 13:53:55Z

1

You can't run onclick with querySelectorAll, here is my simple solution. I just added onclick='change()'

var arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"];

var table = "<table><tr><td><b>Test</b></td>";
table += "<td style='width: 50px'>RN</td>";
table += "<td style='width: 50px'>MW</td></tr>";

for (var i=0; i<arr.length; i++) {
    table += "<td>" + arr[i] + "</td>";
    table += "<td><input class='rn' style='width: 50px' onclick='change()' ></input></td>";
    table += "<td><input style='width: 50px'></input></td></tr>";
}

table += "</table>";


function change() {

    document.getElementById("a").style.color = "red";
}
document.getElementById("table").innerHTML = table;

<div id="table"></div> 
<p id="a">adasd</p>

edited Nov 19, 2017 at 13:53

1stthomas

1,0082 gold badges19 silver badges28 bronze badges

answered Nov 19, 2017 at 13:31

Neji Soltani

1,5114 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting the element class in html element created by javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related