- ベストアンサー
JavaScript自動計算：フォームに数字を選んで自動で合計が表示される仕組みの作り方
- JavaScriptを使用して、フォームにて自動計算を作成する方法について解説します。
- 3つのselectboxから選んだ数字によって合計値が表示される仕組みです。
- コードの書き方が分からず困っている方に対して、具体的な手順をご説明します。
- h-h13
- お礼率24% (37/149)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- mikemike7
- ベストアンサー率87% (97/111)
- 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がプラスされるということです。 現在それを改変しているのですが、できず困ってしまいました。 そちらの改変もご教示いただいてもよろしいでしょうか？