JavaScriptで九九表

前提・実現したいこと

プログラミング初心者です。
JavaScriptでtable要素を使い九九表を作っています。

Javascript
1var table = document.createElement('table');
2        for(var i = 1; i < 9; i++) {
3
4            var tr = document.createElement('tr');
5    
6            for(var j = 1; j < 9; j++) {
7    
8                if(i === 0) {
9                    var th = document.createElement('th');
10                    th.textContent = x;
11                    tr.appendChild(th);
12                } else {
13                    var td = document.createElement('td');
14                    td.textContent = x * y;
15                    tr.appendChild(td);
16                }
17
18                table.appendChild(tr);
19
20                
21
22            }
23
24           for(var x = 1; x < 9; x++) {
25
26            for(var y = 1; y < 9; y++){
27
28            }
29            
30           }
31    
32        }
33
34
35        document.getElementById('wrapper').appendChild(table);
36

HTML
1<body>
2    <section>
3    <h1>九九の表</h1>
4   
5    <div id="wrapper"></div>
6    </section>
7    
8</body>

var x,var yで出力をした数字をtdに入れたいと思っているのですが画像の通りtrの部分はNaN、tdのところは全て81になります。
tableを生成するところから間違えているのでしょうか...？

yasutomi

2019/08/25 12:48

質問をするなら for(var x = 1; x < 9; x++) { のような関係のないコードは削除してきれいな状態で提示していただきたいです。

yasutomi

2019/08/25 12:51

あと if(i === 0) { を何のために記述したのか説明していただきたいです。これが説明できないと回答しても理解することは不可能です。

行動規範の内容に同意します

回答3件

画像の通りtrの部分はNaN、tdのところは全て81になります。

「trの部分」ではなくそこもtdです。デベロッパーツールで確認してみましょう。

【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

tableを生成するところから間違えているのでしょうか...？

表の要素の数が8行8列になっているのは確認されていますか？
for の指定の仕方に問題があるので確認してみてください。

【ループと反復処理 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration

【比較演算子 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

NaNが表示される原因は、xが定義される前にtd要素に追加されているからです。

81しか表示されない原因は、x,yの値がfor(var j = 1; j < 9; j++)と無関係に一定だからです。

投稿2019/08/25 13:23

kei344

総合スコア69416

間違っていても良いので、各行で、自分としては何をしているつもりなのかをちゃんと説明できますか？

投稿2019/08/25 12:43

編集2019/08/25 12:44

otn

総合スコア84576

domでtableを処理するときはthead/tbodyを前提に処理したほうが良いでしょう

あとは上位のdomから順に処理していけば自然とできあがります

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  var wrapper=document.querySelector('#wrapper');
4  var table = document.createElement('table');
5  var thead = document.createElement('thead');
6  var tbody = document.createElement('tbody');
7  wrapper.appendChild(table);
8  table.appendChild(thead);
9  table.appendChild(tbody);
10  for(var i = 0; i <= 9; i++) {
11    var tr = document.createElement('tr');
12    var cell;
13    for(var j = 0; j <= 9; j++) {
14      if(i==0 || j==0){
15        thead.appendChild(tr);
16        cell=document.createElement('th');
17        cell.textContent=(i+j)||"";
18      }else{
19        tbody.appendChild(tr);
20        cell=document.createElement('td');
21        cell.textContent=i*j;
22      }
23      tr.appendChild(cell);
24    }
25  }
26});
27</script>
28<section>
29<h1>九九の表</h1>
30<div id="wrapper"></div>
31</section>