Q&A
回答ありがとうございます。
functionを追加する方法を考えていたのですが、混乱しており、takiuchiの回答が参考になりましたためベストアンサーとさせていただきました。
下記のコードをもう少し簡単(わかりやすく)に書くことはできませんでしょうか？
特にfor,ifの部分をお願いします。
2015/5/4 追記
皆様さっそくのご返信ありがとうございます。
まだまだjsの勉強を始めたばかりの私にとってどれも勉強になりました。
心よりお礼を申し上げます。
回答4件
0
こんにちは。
JQuery を使ってよいのでしたら、
lang
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>questions/9403</title> 6<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 7</head> 8<body> 9<form> 10 11<div id="a"> 12<INPUT TYPE="radio" name="cable" value="100">青<br/> 13<INPUT TYPE="radio" name="cable" value="200">赤<br/> 14<INPUT TYPE="radio" name="cable" value="300">緑 15</div> 16</form> 17 18<form> 19<div id="b"> 20<INPUT TYPE="radio" name="connect" value="100">金<br/> 21<INPUT TYPE="radio" name="connect" value="200">銀<br/> 22<INPUT TYPE="radio" name="connect" value="300">銅 23</div> 24</form> 25 26<INPUT TYPE="button" value="click" onClick="calc();"> 27 28<p id="result">ここに値段が表示されます</p> 29 30<script type="text/javascript"> 31function calc(){ 32 33 var ans = $("input[name='cable']:checked").val() 34 * $("input[name='connect']:checked").val(); 35 36 var result = document.getElementById("result"); 37 result.innerHTML = "<p>料金は"+ans+"円です。</p>"; 38} 39</script> 40</body> 41</html>
ただし、上記のままだと、cableまたはconnectのいずれか、もしくは両方が
選ばれていない状態で、ボタンをクリックされてしまうと、値段のところに
NaN
と表示されてしまうので、そこは何らかの対応をしたほうがいいかと思います。
以上です。
投稿2015/05/04 09:29
総合スコア9058
0
ベストアンサー
こんにちは。
私だったら、次のように専用のfunctionを一つ作成すると思います。
ご参考になれば、幸いです。
lang
1 function calc() { 2 var a = get_checked_value("cable"); 3 var b = get_checked_value("connect"); 4 var ans = a * b; 5 6 var result = document.getElementById("result"); 7 result.innerHTML = "<p>料金は" + ans + "円です。</p>"; 8 9 } 10 11 function get_checked_value(name) { 12 13 var elements = document.getElementsByName(name); 14 for (var i = 0; i < elements.length; i++) { 15 if (elements[i].checked) { 16 return elements[i].value; 17 } 18 } 19 20 return 0; 21 } 22 23コード
投稿2015/05/04 09:58
総合スコア29
0
もう一点、一般的なループの最適化という観点で
補足させてください。
元のループのコード、
lang
1 for(i=0;i<cable.length;i++){ 2 if(cable[i].checked){ 3 a = cable[i].value; 4 } 5 }
は、以下のように、該当するものが見つかったときに
break
を入れたほうがよいと思います。
lang
1 for(i=0;i<cable.length;i++){ 2 if(cable[i].checked){ 3 a = cable[i].value; 4 break; 5 } 6 }
break がないと、i がある値のときに if 条件がtrue になって、
a の値が確定した後も(律儀に)、i = cable.length-1 となる
まで、ループが回ってしまいます。
以上です。
投稿2015/05/04 09:40
総合スコア9058
0
ykt68さんのご意見のように素直にjQueryを使う方がスッキリ書けると思います。
JavaScriptのみで書くのでしたらこんな感じでしょうか。
lang
1function calc(){ 2 var cable = [].slice.call(document.getElementsByName("cable")); 3 var connect = [].slice.call(document.getElementsByName("connect")); 4 5 var a = cable.filter(checked)[0].value; 6 var b = connect.filter(checked)[0].value; 7 8 var ans = a * b; 9 var result = document.getElementById("result"); 10 result.innerHTML = "<p>料金は" + ans + "円です。</p>"; 11} 12 13function checked(element) { 14 return element.checked; 15}
読みやすいか読みにくいかは正直微妙な線ですね…。
ECMAScript 5th準拠なのでIE8以下では動きません。
投稿2015/05/04 09:39
編集2015/05/04 09:54
総合スコア870
[].slice.call()に、NodeListオブジェクトを渡すと、Elementの配列を返してくれるんですね。あと、配列.filter(関数) もjavascriptっぽくていいです。勉強になりました。
Array.prototype.slice.call の方が有名かもしれません。
今の時代気にすることでもないですが、prototypeにアクセスするためIE7以下で使えない欠点がありますし、無駄に長いというのもあって私は [].slice.call としています。（とはいえIE7で [].slice.call が使えるかは知りません＾＾；）
他にも Array.apply(null, NodeList) という方法もあります。
なるほど。ありがとうございます。ちょっと前、JSのprototype関連、調べたのですが、prototype（継承とか） なんとなく分かった（つもりになった）けど、実際にどういう場面で使うの？と思っていたのですが、自分は「何でもJQueryでやっちゃえ派」なもので、知らなかったのですが、こういうときに出てくるんですね。
いえ、でも効率を考えれば「何でもJQueryでやっちゃえ」は理に適っていると思います。私は元々趣味で書いているので効率度外視でDOMを直で触るコードばかりになっているだけです。
TreeWalkerとかMutationObserverとかは触ってて楽しいですね。
回答ありがとうございます。ちょっと私にはまだ高度な内容でしたが、コード自体は見やすいと感じました。勉強させていただきます！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/04 09:40
2015/05/04 09:46
2015/05/04 09:48
2015/05/04 13:16
2015/05/04 13:23
2015/05/04 13:28
2015/05/04 13:33
2015/05/04 13:39