[js] このコードをもっと簡単にかけませんか？

総合スコア9058

2015/05/04 09:40

jQueryなら $('#result').html("<p>料金は"+ans+"円です。</p>"); のほうが良いのでは

2015/05/04 09:46

お題に「特にfor,ifの部分をお願いします。」とあったので、あえてそこだけJQueryを使ってみました。実際にはJQueryを使うなら、おっしゃるとおり、result.innerHTML　のようなコードは書かない方がよいですね。

2015/05/04 09:48

なるほど、そういうことだったのですね。出過ぎた真似をしてしまって申し訳ありません。

2015/05/04 13:16

回答ありがとうございます。 jQueryで簡易化できることを忘れておりました。勉強になりました。自分の経験不足等でまだまだ混乱するところがあるのでjsのみで回答していただいた方をベストアンサーとさせていただきます。

2015/05/04 13:23

＞＞cableまたはconnectのいずれか、もしくは両方が選ばれていない状態で、ボタンをクリックされてしまうと、値段のところに NaN と表示されてしまうこれの対策をしようと考えていたのですが、実際にはどのようにすればよいのでしょうか？

2015/05/04 13:28

例えばベストアンサーのtakiuchiさんのコードでは、function get_checked_value(name)　が、チェックされたものが無いときに0を返すようになっていますので、「料金は0円です。」という、望ましい表示になるはずです。

2015/05/04 13:33

ご返信ありがとうございます。難しく考える必要はなかったんですね。

2015/05/04 13:39

はい。あと、私のほうのだと、ans　をJQueryで計算している行の後に、 ans = ( isNaN(ans) ? 0 : ans ); を入れてやればOKかと思います。

行動規範の内容に同意します

ベストアンサー

こんにちは。
私だったら、次のように専用の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

takiuchi

総合スコア29

2015/05/04 13:10

回答ありがとうございます。 functionを追加する方法を考えていたのですが、混乱しており、takiuchiの回答が参考になりましたためベストアンサーとさせていただきました。

2015/05/04 13:20

訂正 takiuchi →　takiuchiさん敬称が抜けておりました。失礼いたしました。

行動規範の内容に同意します

もう一点、一般的なループの最適化という観点で
補足させてください。

元のループのコード、

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

2015/05/04 13:12

breakのご指摘ありがとうございます。完全に忘れていました笑

行動規範の内容に同意します

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

2015/05/04 10:14

[].slice.call()に、NodeListオブジェクトを渡すと、Elementの配列を返してくれるんですね。あと、配列.filter(関数)　もjavascriptっぽくていいです。勉強になりました。

2015/05/04 10:20

Array.prototype.slice.call の方が有名かもしれません。今の時代気にすることでもないですが、prototypeにアクセスするためIE7以下で使えない欠点がありますし、無駄に長いというのもあって私は [].slice.call としています。（とはいえIE7で [].slice.call が使えるかは知りません＾＾；）他にも Array.apply(null, NodeList) という方法もあります。

2015/05/04 10:29

なるほど。ありがとうございます。ちょっと前、JSのprototype関連、調べたのですが、prototype（継承とか）なんとなく分かった（つもりになった）けど、実際にどういう場面で使うの？と思っていたのですが、自分は「何でもJQueryでやっちゃえ派」なもので、知らなかったのですが、こういうときに出てくるんですね。

2015/05/04 10:40

いえ、でも効率を考えれば「何でもJQueryでやっちゃえ」は理に適っていると思います。私は元々趣味で書いているので効率度外視でDOMを直で触るコードばかりになっているだけです。 TreeWalkerとかMutationObserverとかは触ってて楽しいですね。