javascriptでの計算結果をHTMLのテーブルに表示

前提・実現したいこと

プログラムの勉強を始めて１か月の初心者です。
おみくじアプリを作っています。
大吉、中吉、吉、凶の４種類があり、それぞれの発生回数をHTMLに記載したテーブル内に反映させたいです。
発生回数はJava scriptで取得しています。

発生している問題

Java scriptで計算した値を、HTMLのテーブルタグ内の任意の変数に代入するやり方がわからない

該当のソースコード

java
1
2(function(){
3  'use strict'
4  var n_big=0, n_middle=0,   n_bad=0, n_total=0;
5 // n_normal=0,
6  var btn = document.getElementById("btn");
7  var table = document.getElementById('table');
8  var n_normal = table.rows[1].cells[3];
9  btn.addEventListener('click', function(){
10    // var n = Math.floor(Math.random()*3);
11    var n = Math.random();
12    console.log(n);
13    if(n>0.9){
14      this.textContent='大吉';
15      n_big += 1;
16    }else if(n>0.7){
17      this.textContent='中吉';
18      n_middle += 1;
19      // console.log(n_middle);
20    }else if(n>0.2){
21      this.textContent='吉';
22      n_normal += 1;
23    }else{
24      this.textContent='凶';
25      n_bad += 1;
26    }
27    n_total = n_big+n_middle+n_normal+n_bad;
28    // console.log(n_total);
29
30  });
31  btn.addEventListener('mousedown', function(){
32    this.className = 'pushed';
33    });
34  btn.addEventListener('mouseup', function(){
35    this.className = '';
36
37  });
38
39
40})();
41

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="CSS/styeles.css">
6  <title>おみくじあぷり</title>
7</head>
8<body>
9  <div id="btn">?</div>
10  <script src="JS/main.js"></script>
11  <div id="table"></div>
12
13  <table class="table" border="1" width="300" >
14    <thead>
15      <tr>
16        <td></td>
17        <td>出現回数</td>
18        <td>出現率</td>
19      </tr>
20    </thead>
21
22      <tbody>
23      <tr>
24        <td>大吉</td>
25        <td>n_big</td>
26        <td>p_big</td>
27      </tr>
28
29      <tr>
30        <td>中吉</td>
31        <td>n_middle</td>
32        <td>p_middle</td>
33      </tr>
34
35      <tr>
36        <td>吉</td>
37        <td>n_normal</td>
38        <td>p_normal</td>
39      </tr>
40
41      <tr>
42        <td>凶</td>
43        <td>n_bad</td>
44        <td>p_bad</td>
45      </tr>
46      <tr>
47        <td>合計</td>
48        <td>n_total</td>
49        <td>p_total</td>
50      </tr>
51
52    </tbody>
53  </table>
54
55</body>
56</html>
57

css
1@charset "UTF-8";
2
3#btn{
4  margin: 50px auto 20px;
5  width: 200px;
6  height: 200px;
7  background: #FFFF00;
8  opacity: 0.7;
9  border-radius: 50%;
10  box-shadow: 0px 10px #888800;
11  text-align: center;
12  line-height: 200px;
13  font-size: 100px;
14  color: #800000;
15  cursor: pointer;
16  user-select: none;
17}
18
19#btn:hover{
20  background: #FFFF66;
21  opacity: 1;
22}
23#btn.pushed{
24  margin: 57px auto 20px;
25  box-shadow: 0px 3px #888800;
26
27}
28
29#table{
30  text-align: center;
31}
32

試したこと

HTML内のテーブルタグをJSに読み込む
var table = document.getElementById('table');
さらに行列を指定して取得
var n_normal = table.rows[1].cells[3];
ここで実行エラーになっています。

そもそもこのやり方でできるか分かっていない状態です。
初めての質問で分かりづらいかもしれませんが、よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

Google chrome 68.0.3440.106（Official Build）（64 ビット）

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

回答2件

ざっとしか見てませんが、ヒントを。

getElementByIdで取得されているのは<div id="table"></div>
です。
get Element By Id

訳すと「idによってエレメントを取得する」ですよね？
指定したidで取得したエレメントはdivなのでrowもcolもありません。

投稿2018/09/07 06:07

m.ts10806

総合スコア80850

atsushi-k

2018/09/07 12:17

ご回答ありがとうございます！ Idが無いと取得できないわけですね。腑に落ちました。

m.ts10806

2018/09/07 12:50

命名は紛らわしいものは避けた方が良いです。今回のような誤用が発生するとなかなか進まなくなります。

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

ベストアンサー

まずは<td>内に記述しているn_○○、p_○○をidに設定してあげましょう。
こんな感じで。

HTML
1<body>
2  <div id="btn">?</div>
3  <script src="JS/main.js"></script>
4  <div id="table"></div>
5
6  <table class="table" border="1" width="300" >
7    <thead>
8      <tr>
9        <td></td>
10        <td>出現回数</td>
11        <td>出現率</td>
12      </tr>
13    </thead>
14
15      <tbody>
16      <tr>
17        <td>大吉</td>
18        <td id="n_big">0</td>
19        <td id="p_big">0</td>
20      </tr>
21
22      <tr>
23        <td>中吉</td>
24        <td id="n_middle">0</td>
25        <td id="p_middle">0</td>
26      </tr>
27
28      <tr>
29        <td>吉</td>
30        <td id="n_normal">0</td>
31        <td id="p_normal">0</td>
32      </tr>
33
34      <tr>
35        <td>凶</td>
36        <td id="n_bad">0</td>
37        <td id="p_bad">0</td>
38      </tr>
39      <tr>
40        <td>合計</td>
41        <td id="n_total">0</td>
42        <td id="p_total">0</td>
43      </tr>
44
45    </tbody>
46  </table>
47
48</body>
49</html>

そして、idでセルを特定してみましょう。

javaScript
1(function(){
2  'use strict'
3  var big=0, middle=0, normal=0, bad=0, total=0;
4 // n_normal=0,
5  var btn = document.getElementById("btn");
6  var table = document.getElementById('table');
7  var n_big = document.getElementById('n_big'); //大吉の出現数セル
8  var n_middle = document.getElementById('n_middle'); //中吉の出現数セル
9  var n_normal = document.getElementById('n_normal'); //吉の出現数セル
10  var n_bad = document.getElementById('n_bad'); //凶の出現数セル
11  var n_total = document.getElementById('n_total'); //合計の出現数セル
12  btn.addEventListener('click', function(){
13    // var n = Math.floor(Math.random()*3);
14    var n = Math.random();
15    console.log(n);
16    if(n>0.9){
17      this.textContent='大吉';
18      big += 1;
19      n_big.textContent=big;
20    }else if(n>0.7){
21      this.textContent='中吉';
22      middle += 1;
23      n_middle.textContent=middle;
24    // console.log(n_middle);
25    }else if(n>0.2){
26      this.textContent='吉';
27      normal += 1;
28      n_normal.textContent=normal;
29    }else{
30      this.textContent='凶';
31      bad += 1;
32      n_bad.textContent=bad;
33   }
34    total = big+middle+normal+bad;
35    // console.log(n_total);
36    n_total.textContent = total; 
37
38  });
39  btn.addEventListener('mousedown', function(){
40    this.className = 'pushed';
41    });
42  btn.addEventListener('mouseup', function(){
43    this.className = '';
44
45  });
46
47
48})();

出現率の計算については記述しませんが、同じようにやればできるはずです。

投稿2018/09/07 06:03

編集2018/09/07 06:06

yukihisa

総合スコア672

atsushi-k

2018/09/07 12:20

ご回答ありがとうございます。納得することができました。しかし　 n_big.textContent=big等のtextContentの箇所で以下のエラーが発生します。 Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLDivElement.<anonymous> (main.js:26) 「textContent」とは文字列を取得するので数値は無効になるのでしょうか？申し訳ありませんが、よろしくお願いします。

atsushi-k

2018/09/07 14:34

<table>タグ内に <script src="JS/main.js"></script> を記述することで解決でき、値が正しく表示できました。ありがとうございました。

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

あなたの回答