javascript에서 만든 html 요소에 요소 클래스 설정

Question

javascript로 html 테이블을 만들지 만 이러한 요소에 클래스 이름을 설정할 수 없습니다.

원하는 것 : 두 번째 열의 입력 중 하나를 클릭하면 기능이 활성화됩니다. 예를 들어,이 함수는 <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>