初めての店舗開業を成功させよう>>

現在フォームにて自動計算を作っています。

簡単にまとめますと3つのselectboxがあり、選んだ数字によって自動で合計がでてくるという仕様です。


<select name="score1">
<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">
<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">
<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>合計(ここにはscore1とscore2とscore3の合計が表示される)</p>
数字を変えるたびに合計が変わるようにしたです。
valueに値が無い場合はなしと判断する。

コードの書き方がわからず困っています。
お分かりの方がいらっしゃいましたらご教示お願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (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を入れています。
    • good
    • 0
この回答へのお礼

お忙しい中、ご回答有難う御座います。
遅くなりましたが、できました。

> 選択がない場合、その項目だけ「なし」にするのか、全てをなしにするのか
> よくわからなかったので、全て選択した場合、計算するようにしてみました。
とありましたが、選択がない場合は全てなしではなくその項目だけ「なし」になるということです。
なしというよりも0がプラスされるということです。

現在それを改変しているのですが、できず困ってしまいました。

そちらの改変もご教示いただいてもよろしいでしょうか?

お礼日時:2011/05/19 01:16

> 選択がない場合は全てなしではなくその項目だけ「なし」になるということです。


#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>

これで試してみてください。
    • good
    • 0

よがあけた。

もうねようっとおもいつつ。
すべてがちぐはぐになった。
ふぃあ~ふぉっくすならうごくかも!?
ぜんかくくうはくは、はんかくに。


<!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に値が1つでも無い場合は、なしと判断'
   : '合計 ' + result.total;
 });
</script>
    • good
    • 0
この回答へのお礼

夜遅くに有難う御座います。
#1の方のコードがわかりやすかったため、そちらを参考にさせていただきました。

お忙しい中、ご教示いただいたにも関わらず申し訳ありません。

また、わからないことなどがありましたら、宜しくお願いいたします。

お礼日時:2011/05/19 01:20

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング