テーブルで作成した表の中に計算結果が表示されない

前提・実現したいこと

あるゲームのスキルの発動率を計算するフォームを作成しています。
Javascript自体が初めてで、見よう見真似でコードを書いてみたのですが・・・

onkはスキルの発動率を上げるスキルで３個までセット可能です。
hitはスキル1個の発動率（％表記）
numはスキルのセット数
で計算の過程があり、
sumでスキルが1個以上当選する確率を求めています。

～ここまではうまく動作しました。計算も誤差が出ていないことを確認済みです～

～ここからが問題点～

更にtsumでは、補助１～４の4つのうち、１つ以上が発動する確率を余事象で求めようと思っていますが・・・

BODYの中の３つ目のテーブル
tsum1の計算結果が表の中に表示されません。

計算の記述がおかしいのかと思い・・・

試しに
tsum2、tsum3の変数を数字にしてみましたが、それも表示されません。

原因はどこにありますでしょうか？

発生している問題・エラーメッセージ

エラーメッセージはでてきません。

該当のソースコード

<html>
<head>
<style type="text/css">
<!--
table{
  border-collapse: collapse;
}
td, th{
  border: solid 1px;
  padding: 0.3em;
}
td{
  text-align: right;
}
th{
  background-color: #efefef;
}
input{
  text-align: right;
}
-->
</style>
<script type="text/javascript">
<!--
function calculate(){
  var hit1 = document.getElementById("hit1").value;
  var hit2 = document.getElementById("hit2").value;
  var hit3 = document.getElementById("hit3").value;
  var hit4 = document.getElementById("hit4").value;

  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
  var num3 = document.getElementById("num3").value;
  var num4 = document.getElementById("num4").value;

  var onk2 = document.getElementById("onk2").value;
  var onk3 = document.getElementById("onk3").value;
  
  
  var onh1  // 温故込みの単体発動率を計算
  onh1 = parseInt(hit1) + parseInt(onk3) * 3.45 + parseInt(onk2) * 2.95;
  onh1 = Math.round(onh1 * 100);   // 四捨五入2－1
  onh1 = onh1 / 100;   // 四捨五入2－2
  onh1 = onh1 / 100;
  
  var onh2  // 温故込みの単体発動率を計算
  onh2 = parseInt(hit2) + parseInt(onk3) * 3.45 + parseInt(onk2) * 2.95;
  onh2 = Math.round(onh2 * 100);   // 四捨五入2－1
  onh2 = onh2 / 100;   // 四捨五入2－2
  onh2 = onh2 / 100;
  
  var onh3  // 温故込みの単体発動率を計算
  onh3 = parseInt(hit3) + parseInt(onk3) * 3.45 + parseInt(onk2) * 2.95;
  onh3 = Math.round(onh3 * 100);   // 四捨五入2－1
  onh3 = onh3 / 100;   // 四捨五入2－2
  onh3 = onh3 / 100;
  
  var onh4  // 温故込みの単体発動率を計算
  onh4 = parseInt(hit4) + parseInt(onk3) * 3.45 + parseInt(onk2) * 2.95;
  onh4 = Math.round(onh4 * 100);   // 四捨五入2－1
  onh4 = onh4 / 100;   // 四捨五入2－2
  onh4 = onh4 / 100;
  
    
  
  var gya1  //単体で発動しない確率を計算
  gya1 = 1 -  onh1;
  
  var gya2  //単体で発動しない確率を計算
  gya2 = 1 -  onh2;
  
  var gya3  //単体で発動しない確率を計算
  gya3 = 1 -  onh3;
  
  var gya4  //単体で発動しない確率を計算
  gya4 = 1 -  onh4;
  
  
  
  var haz1  //セット数の全て外れる確率を計算
  haz1 = Math.pow(gya1,num1);   // セット数乗
  haz1 = Math.round(haz1 * 1000000);   // 四捨五入2－1
  haz1 = haz1 / 1000000;   // 四捨五入2－2
  
  var haz2  //セット数の全て外れる確率を計算
  haz2 = Math.pow(gya2,num2);   // セット数乗
  haz2 = Math.round(haz2 * 1000000);   // 四捨五入2－1
  haz2 = haz2 / 1000000;   // 四捨五入2－2
  
  var haz3  //セット数の全て外れる確率を計算
  haz3 = Math.pow(gya3,num3);   // セット数乗
  haz3 = Math.round(haz3 * 1000000);   // 四捨五入2－1
  haz3 = haz3 / 1000000;   // 四捨五入2－2
  
  var haz4  //セット数の全て外れる割合を計算
  haz4 = Math.pow(gya4,num4);   // セット数乗
  haz4 = Math.round(haz4 * 1000000);   // 四捨五入2－1
  haz4 = haz4 / 1000000;   // 四捨五入2－2
  

  
  var ata1  //セット数での当たりの割合を計算
  ata1 = 1 - haz1
  
  var ata2  //セット数での当たりの割合を計算
  ata2 = 1 - haz2
  
  var ata3  //セット数での当たりの割合を計算
  ata3 = 1 - haz3
  
  var ata4  //セット数での当たりの割合を計算
  ata4 = 1 - haz4
  
  
  
  var sum1  //セット数の発動率を計算（％）
  sum1 = ata1 * 100;
  sum1 = Math.round(sum1 * 100);   // 四捨五入2－1
  sum1 = sum1 / 100;   // 四捨五入2－2
  
  var sum2  //セット数の発動率を計算
  sum2 = ata2 * 100;
  sum2 = Math.round(sum2 * 100);   // 四捨五入2－1
  sum2 = sum2 / 100;   // 四捨五入2－2
  
  var sum3  //セット数の発動率を計算
  sum3 = ata3 * 100;
  sum3 = Math.round(sum3 * 100);   // 四捨五入2－1
  sum3 = sum3 / 100;   // 四捨五入2－2
  
  var sum4  //セット数の発動率を計算
  sum4 = ata4 * 100;
  sum4 = Math.round(sum4 * 100);   // 四捨五入2－1
  sum4 = sum4 / 100;   // 四捨五入2－2
  
  
  
  var tsum1
  tsum1 = haz1 * haz2 * haz3 * haz4;
  tsum1 = 1 - tsum1;
  tsum1 = tsum1 * 100;
  tsum1 = Math.round(tsum1 * 100);   // 四捨五入2－1
  tsum1 = tsum1 / 100;   // 四捨五入2－2
  
 var tsum2 = 2;
 
 var tsum3 = 3;
  
  
  
  document.getElementById("sum1").textContent = sum1;
  document.getElementById("sum2").textContent = sum2;
  document.getElementById("sum3").textContent = sum3;
  document.getElementById("sum4").textContent = sum4;

  document.getElementById("onh1").textContent = onh1;
  document.getElementById("onh2").textContent = onh2;
  document.getElementById("onh3").textContent = onh3;
  document.getElementById("onh4").textContent = onh4;
  
  document.getElementById("gya1").textContent = gya1;
  document.getElementById("gya2").textContent = gya2;
  document.getElementById("gya3").textContent = gya3;
  document.getElementById("gya4").textContent = gya4;
  
  document.getElementById("haz1").textContent = haz1;
  document.getElementById("haz2").textContent = haz2;
  document.getElementById("haz3").textContent = haz3;
  document.getElementById("haz4").textContent = haz4;
  
  document.getElementById("tsum1").textContent = tsum1;
  document.getElementById("tsum2").textContent = tsum2;
  document.getElementById("tsum3").textContent = tsum3;

  
}
-->
</script>

</head>
<body>

<table>
  <tr>
    <th>温故知新Lv</th>
    <th>個数</th>
  </tr><tr>
    <td>Lv20（2.95%）</td>
    <td><input type="text" id="onk2" size="5"></td>
  </tr><tr>
    <td>Lv30（3.45%）</td>
    <td><input type="text" id="onk3" size="5"></td>
    </tr>
</table>

<br>

<table>
  <tr>
    <th>名称</th>
    <th>単体発動率</th>
    <th>セット数</th>
    <th>セット発動率</th>
  </tr><tr>
    <td>補助①</td>
    <td><input type="text" id="hit1" size="5"></td>
    <td><input type="text" id="num1" size="5"></td>
    <td id="sum1"></td>
  </tr><tr>
    <td>補助②</td>
    <td><input type="text" id="hit2" size="5"></td>
    <td><input type="text" id="num2" size="5"></td>
    <td id="sum2"></td>
  </tr><tr>
    <td>補助③</td>
    <td><input type="text" id="hit3" size="5"></td>
    <td><input type="text" id="num3" size="5"></td>
    <td id="sum3"></td>
  </tr><tr>
    <td>補助④</td>
    <td><input type="text" id="hit4" size="5"></td>
    <td><input type="text" id="num4" size="5"></td>
    <td id="sum4"></td>
  </tr>
</table>

<br>

****__<table>
  <tr>
    <th>条件</th>
    <th>発動率（％）</th>
  </tr><tr>
    <td>１つ以上発動</td>
    <td id="tsum1"></td>
  </tr><tr>
    <td>２つ以上発動</td>
    <td id="tsum2"></td>
  </tr><tr>
    <td>３つ以上発動</td>
    <td id="tsum3"></td>
  </tr>**
</table>__**

<br>
<input type="button" value="計算する" onclick="calculate()">


</body>
</html>

試したこと

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

このコードはNotePad＋＋をつかって書きました。

退会済みユーザー

2018/10/24 02:17

発生している問題・エラーメッセージで「エラーメッセージはでてきません。」としているように、コードをコードブロック```で囲ってください。https://www.markdownguide.org/extended-syntax/#fenced-code-blocks

yuzpon14

2018/10/24 03:05

ご指摘ありがとうございます。早速つけてみました

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

回答2件

デバッグしようぜ！

JavascriptのChromeでのデバッグ方法個人的まとめ2016

投稿2018/10/24 02:13

退会済みユーザー

総合スコア0

yuzpon14

2018/10/24 03:06

JavaScriptのデバッグはコードを追加しないと出てこないんですね。。。すみません。知りませんでした。自分でも試してみます。

退会済みユーザー

2018/10/24 03:09

コードを追加しなくてもできますよ、ブレークポイントをセットすればいいので。

yuzpon14

2018/10/24 03:47

ブレイクポイントのセットというのは、私が使ってるNotePad＋＋でもできますか？

退会済みユーザー

2018/10/24 03:53

NotePad++ではできませんが、IEやEdge、Chromeなどのブラウザで可能ですよ。F12を押してみてください、デバッグのための機能が詰まったペイン(ウィンドウのようなもの)が現れます。詳しくはリンクを参考にしてみてください。

yuzpon14

2018/10/24 04:00

NotePad＋＋で書いたものをChromeで開きF12 を押したら出てきました！上の方のヒントで解決しちゃいましたが、ppnのアドバイスも大変参考になりました。ありがとうございます。

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

ベストアンサー

ご提示いただいたコードが正しければ、ボタンを押すとエラーが出ますね。
設定されていないIDの要素を取得している箇所があるのでそこを確認しましょう。

投稿2018/10/24 03:17

dice142

総合スコア5158

yuzpon14

2018/10/24 03:46

回答ありがとうございます。設定されていないIDの要素の取得箇所とは具体的にどのあたりでしょうか？？可能でしたら教えていただけると嬉しいです。

dice142

2018/10/24 03:51

ひとつずつ確認していけばわかるはずなので具体的にはひとまず避けます。 getElementByIdで指定しているidがあるかどうか確認してみてください。（hit1とかnum1とか他いろいろ）少なくとも質問文内のコードは指定したidがないものがあります。どうしても見つからないなら仰ってください。

yuzpon14

2018/10/24 03:57

すみません。わかりました！答えは・・・ ’’’ document.getElementById("onh1").textContent = onh1; document.getElementById("onh2").textContent = onh2; document.getElementById("onh3").textContent = onh3; document.getElementById("onh4").textContent = onh4; document.getElementById("gya1").textContent = gya1; document.getElementById("gya2").textContent = gya2; document.getElementById("gya3").textContent = gya3; document.getElementById("gya4").textContent = gya4; document.getElementById("haz1").textContent = haz1; document.getElementById("haz2").textContent = haz2; document.getElementById("haz3").textContent = haz3; document.getElementById("haz4").textContent = haz4; ’’’ この部分ですかね？？消してみたらうまくできました！変数の計算をするために必要な文章なのかと思ってたのですが、間違った解釈をしていたようです。ありがとうございました。

dice142

2018/10/24 04:02

その通りです。おめでとうございます。今後はブラウザの開発者ツールも活用して頑張ってください。

yuzpon14

2018/10/24 04:08

はい！頑張って勉強します(^^)/

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

あなたの回答