JavaScript 오류 ... 버튼을 클릭 할 때 요소를 만들지 않습니다.

내 코드는 다음과 같이 나타납니다. "submitButton"을 클릭했지만 테이블을 만들었어야합니다. 여기 내 코드는 다음과 같습니다.JavaScript 오류 ... 버튼을 클릭 할 때 요소를 만들지 않습니다.

submitButton.addEventListener("click",() => { 
     var newTable = document.createElement("table"); 
     for(let i = 0; i < parseInt(numOfStudents); i++){ 
      var newRow = document.createElement("tr"); 
      var newInput = document.createElement("td"); 
      var newInput2 = document.createElement("td"); 
      document.newRow.appendChild(newInput); 
      document.newRow.appendChild(newInput2); 
      document.newTable.appendChild(newRow); 
      document.body.appendChild(newTable); 
     } 
    });

출처

2017-11-17 Anonymous

본문이있는 요소에는 액세스 할 수 없습니다. 당신은 단지에 텍스트를 추가 할 필요가 루프에서와 같이 새로운 생성 요소는

var numOfStudents=10 
 
submitButton=document.getElementById("submitButton") 
 
submitButton.addEventListener("click",() => { 
 
     var newTable = document.createElement("table"); 
 
     for(let i = 0; i < parseInt(numOfStudents); i++){ 
 
      var newRow = document.createElement("tr"); 
 
      
 
      var newInput = document.createElement("td"); 
 
      var newInput2 = document.createElement("td"); 
 
      
 
      newRow.appendChild(newInput); 
 
      newRow.appendChild(newInput2); 
 
      newTable.appendChild(newRow); 
 
      document.body.appendChild(newTable); 
 
     } 
 
    });

<button id="submitButton" >button</button>

출처

2017-11-17 15:57:07

U 아래와 같이 직접에 추가 할 수의 경우 등등에서 getElementById 같은 DOM 기능을 사용할 필요가 그것은 .. 그렇지 않으면 당신은 그것을 볼 수 없습니다 (당신이 dev에 콘솔을 열지 않는 한).

// Helpers 
 
const createElement = el => document.createElement(el) 
 
const createText = text => document.createTextNode(text) 
 

 
// Create rows 
 
const addStudentRows = students => { 
 
    const $body = document.querySelector('body') 
 

 
    const $table = createElement('table') 
 

 
    for (let i = 0; i < students;i++) { 
 
    let $td1 = createElement('td') 
 
    let $td2 = createElement('td') 
 

 
    $td1.appendChild(createText('Hello')) 
 
    $td2.appendChild(createText('World')) 
 

 
    let $tr = createElement('tr') 
 
    $tr.appendChild($td1) 
 
    $tr.appendChild($td2) 
 

 
    $table.appendChild($tr) 
 
    } 
 

 
    $body.appendChild($table) 
 
} 
 

 
// Event listener 
 
document.querySelector('button') 
 
    .addEventListener('click', e => addStudentRows(1))

table { 
 
    margin-bottom: 10px; 
 
} 
 

 
table tr td { 
 
    padding: 10px; 
 
    border-right:1px solid #f0f0f0; 
 
    border-top: 1px solid #f0f0f0; 
 
    border-bottom: 1px solid #f0f0f0; 
 
} 
 

 
table tr td:first-child { 
 
    border-left:1px solid #f0f0f0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <button>Click here</button> 
 
</body> 
 
</html>

: 여기

은 일례이며

출처

2017-11-17 16:20:01

JavaScript 오류 ... 버튼을 클릭 할 때 요소를 만들지 않습니다.

답변

관련 문제