- ベストアンサー
JavaScript自動計算：フォームに数字を選んで自動で合計が表示される仕組みの作り方
- JavaScriptを使用して、フォームにて自動計算を作成する方法について解説します。
- 3つのselectboxから選んだ数字によって合計値が表示される仕組みです。
- コードの書き方が分からず困っている方に対して、具体的な手順をご説明します。
- h-h13
- お礼率24% (37/149)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
選択がない場合、その項目だけ「なし」にするのか、全てをなしにするのか よくわからなかったので、全て選択した場合、計算するようにしてみました。 <script type="text/javascript"><!-- function calculate(){ var score1 = document.getElementById('score1').options[document.getElementById('score1').selectedIndex].value; var score2 = document.getElementById('score2').options[document.getElementById('score2').selectedIndex].value; var score3 = document.getElementById('score3').options[document.getElementById('score3').selectedIndex].value; if(score1 == "" || score2 == "" || score3 == ""){ document.getElementById('result').innerHTML = "なし"; } else{ document.getElementById('result').innerHTML = parseInt(score1) + parseInt(score2) + parseInt(score3); } } --></script> <select name="score1" id="score1" onChange="calculate()"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score2" id="score2" onChange="calculate()"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score3" id="score3" onChange="calculate()"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p id="result">合計（ここにはscore1とscore2とscore3の合計が表示される）</p> 各セレクトボックスには、それぞれidとonchangeを入れています。 p要素にもidを入れています。
その他の回答 (2)
- mikemike7
- ベストアンサー率87% (97/111)
> 選択がない場合は全てなしではなくその項目だけ「なし」になるということです。 #1のJavaScript部分だけ変更します。 <script type="text/javascript"><!-- function calculate(){ var score1 = parseInt(document.getElementById('score1').options[document.getElementById('score1').selectedIndex].value); var score2 = parseInt(document.getElementById('score2').options[document.getElementById('score2').selectedIndex].value); var score3 = parseInt(document.getElementById('score3').options[document.getElementById('score3').selectedIndex].value); if(isNaN(score1)){score1 = 0;} if(isNaN(score2)){score2 = 0;} if(isNaN(score3)){score3 = 0;} document.getElementById('result').innerHTML = score1 + score2 + score3; } --></script> これで試してみてください。
- babu_baboo
- ベストアンサー率51% (268/525)
よがあけた。もうねようっとおもいつつ。 すべてがちぐはぐになった。 ふぃあ～ふぉっくすならうごくかも！？ ぜんかくくうはくは、はんかくに。 <!DOCTYPE html> <title></title> <body> <div> <select name="score1" onchange="hoge()"> <option value="a">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score2" onchange="hoge()"> <option value="b">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score3" onchange="hoge()"> <option value="c">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p>合計（ここにはscore1とscore2とscore3の合計が表示される）</p> </div> <script type="application/javascript; version=1.8"> const addNum = (function ({ flag, total }, { value }) isNaN (value) ? { flag : true, total: total } : { flag : flag, total: total + Number (value) }); const hoge = (function () { let elements = document.querySelectorAll ('select[name^="score"]'); let result = Array.reduce (elements, addNum, { flag: false, total: 0 }); let target = document.querySelector ('p').firstChild; target.nodeValue = (result.flag) ? 'valueに値が１つでも無い場合は、なしと判断' : '合計 ' + result.total; }); </script>
お礼
夜遅くに有難う御座います。 #1の方のコードがわかりやすかったため、そちらを参考にさせていただきました。 お忙しい中、ご教示いただいたにも関わらず申し訳ありません。 また、わからないことなどがありましたら、宜しくお願いいたします。
お礼
お忙しい中、ご回答有難う御座います。 遅くなりましたが、できました。 > 選択がない場合、その項目だけ「なし」にするのか、全てをなしにするのか > よくわからなかったので、全て選択した場合、計算するようにしてみました。 とありましたが、選択がない場合は全てなしではなくその項目だけ「なし」になるということです。 なしというよりも0がプラスされるということです。 現在それを改変しているのですが、できず困ってしまいました。 そちらの改変もご教示いただいてもよろしいでしょうか？