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

bodyで要素にアクセスすることはできません。あなただけにいくつかのテキストを追加する必要があり、あなたのループのように、新たな作成された要素は、あなたが

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エラー...ボタンがクリックされたときに要素を作成しません

答えて

関連する問題