質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.07%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 523

yuzpon14

score 15

 前提・実現したいこと

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

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

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

~ここからが問題点~

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

BODYの中の3つ目のテーブル
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>1つ以上発動</td>
    <td id="tsum1"></td>
  </tr><tr>
    <td>2つ以上発動</td>
    <td id="tsum2"></td>
  </tr><tr>
    <td>3つ以上発動</td>
    <td id="tsum3"></td>
  </tr>**
</table>__**

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


</body>
</html>

 試したこと

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2018/10/24 11:17

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

    キャンセル

  • yuzpon14

    2018/10/24 12:05

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

    キャンセル

回答 2

checkベストアンサー

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/24 12: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;
    ’’’
    この部分ですかね??
    消してみたらうまくできました!
    変数の計算をするために必要な文章なのかと思ってたのですが、間違った解釈をしていたようです。
    ありがとうございました。

    キャンセル

  • 2018/10/24 13:02

    その通りです。
    おめでとうございます。

    今後はブラウザの開発者ツールも活用して頑張ってください。

    キャンセル

  • 2018/10/24 13:08

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

    キャンセル

+2

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/24 12:47

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

    キャンセル

  • 2018/10/24 12:53

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

    キャンセル

  • 2018/10/24 13:00

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る