javascriptで作成されたhtml要素の要素クラスを設定する

Question

javascriptでhtmlテーブルを作成していますが、これらの要素にクラス名を設定できません。

必要なもの：2番目の列の入力の1つをクリックすると、機能が有効になります。たとえば、この関数は<p>の色を赤に設定します。

私は多くのソリューションを試していましたが、まだ動作していません。

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; 

Answer 1

あなたはquerySelectorAllとonclickを実行することはできませんが、ここで私のシンプルなソリューションです。私はちょうど答えはあなたの問題を解決しない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>