JavaScriptを使用してHTMLテーブルを生成してもテーブルが表示されない

JavaScriptテーブルを作成する際に、ユーザーが必要とする行数と列数を入力するように求められたら、HTMLテーブルを作成しようとしています。このテーブルは無作為に生成された色で塗りつぶされますが、なぜテーブルが生成されていないのかわかりません。JavaScriptを使用してHTMLテーブルを生成してもテーブルが表示されない

<script type="text/javascript"> 
var colors = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
function createTable() 
{ 
    var num_rows = prompt("How many rows?"); 
    var num_cols = prompt("How many columns?"); 
    var theader = '<table border="1">\n'; 
    var tbody = ''; 

    for(var i=0; i<num_rows;i++) 
    { 
     tbody += '<tr>'; 
     for(var j=0; j<num_cols;j++) 
     { 
      tbody += '<td>'; 
      tbody += colors; 
      tbody += '</td>'; 
     } 
     tbody += '</tr>\n'; 
    } 
    var tfooter = '</table>'; 
    document.getElementById('shell').innerHTML = theader + tbody + tfooter; 
} 
var choice = prompt("create table?"); 
if (choice !== 0) { 
    createTable(); 
} 

</script> 
<body id='shell'> 

</body>

出典

2017-10-31 AwBi

問題は、ページの本体が作成される前にJavaScriptが実行されていることです。あなたがコンソールに見える場合は、エラーが表示されるはずです。

test.html:23 Uncaught TypeError: Cannot set property 'innerHTML' of null 
at createTable (test.html:23) 
at test.html:27 
createTable @ test.html:23 
(anonymous) @ test.html:27

一つの一般的な解決策は、

そのコードをヘッダ内のコードを残すが、（ここではHow do I call a JavaScript function on page load?説明したように）のみ負荷にそれを呼び出すことであろう

window.onload = function() { 
    var choice = prompt("create table?"); 
    if (choice !== 0) { 
     createTable(); 
    } 
};

実際の色（スタイルの設定に関係する）ではなく、セルにテキストを挿入していることに注意してください。

出典

2017-10-31 15:20:04 tomf

JavaScriptを使用してHTMLテーブルを生成してもテーブルが表示されない

答えて

関連する問題