質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    19307questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • for

    272questions

    for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

  • 関数

    246questions

    関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

  • if

    233questions

    if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。

  • ループ

    59questions

    ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,515

twin_bird

score 216

下記のコードをもう少し簡単(わかりやすく)に書くことはできませんでしょうか?
特にfor,ifの部分をお願いします。



<body>
<form>
<div id="a">
<INPUT TYPE="radio" name="cable" value="100">青<br/>
<INPUT TYPE="radio" name="cable" value="200">赤<br/>
<INPUT TYPE="radio" name="cable" value="300">緑
</div>
</form>

<form>
<div id="b">
<INPUT TYPE="radio" name="connect" value="100">金<br/>
<INPUT TYPE="radio" name="connect" value="200">銀<br/>
<INPUT TYPE="radio" name="connect" value="300">銅
</div>
</form>


<INPUT TYPE="button" value="click" onClick="calc();">

<p id="result">ここに値段が表示されます</p>

<script type="text/javascript">

function calc(){
    var cable = document.getElementsByName("cable");
    var connect = document.getElementsByName("connect");   
    var a;
    var b; 
       
    for(i=0;i<cable.length;i++){
    if(cable[i].checked){
    a = cable[i].value;
    }
    }
    
    for(i=0;i<connect.length;i++){
    if(connect[i].checked){
    b = connect[i].value;
    }
    }
   
    var ans = a*b;
    var result = document.getElementById("result");
    result.innerHTML = "<p>料金は"+ans+"円です。</p>";
    
    }
   
</script>
</body>



2015/5/4 追記
皆様さっそくのご返信ありがとうございます。
まだまだjsの勉強を始めたばかりの私にとってどれも勉強になりました。
心よりお礼を申し上げます。


  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+1

こんにちは。
JQuery を使ってよいのでしたら、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>questions/9403</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body> 
<form>

<div id="a"> 
<INPUT TYPE="radio" name="cable" value="100">青<br/> 
<INPUT TYPE="radio" name="cable" value="200">赤<br/> 
<INPUT TYPE="radio" name="cable" value="300">緑 
</div> 
</form> 

<form> 
<div id="b"> 
<INPUT TYPE="radio" name="connect" value="100">金<br/> 
<INPUT TYPE="radio" name="connect" value="200">銀<br/> 
<INPUT TYPE="radio" name="connect" value="300">銅 
</div> 
</form> 

<INPUT TYPE="button" value="click" onClick="calc();"> 

<p id="result">ここに値段が表示されます</p> 

<script type="text/javascript"> 
function calc(){ 
    
    var ans = $("input[name='cable']:checked").val()
                * $("input[name='connect']:checked").val();
    
    var result = document.getElementById("result"); 
    result.innerHTML = "<p>料金は"+ans+"円です。</p>";   
}     
</script> 
</body>
</html>
  
ただし、上記のままだと、cableまたはconnectのいずれか、もしくは両方が
選ばれていない状態で、ボタンをクリックされてしまうと、値段のところに
NaN
と表示されてしまうので、そこは何らかの対応をしたほうがいいかと思います。

以上です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/04 18:40

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

    キャンセル

  • 2015/05/04 18:46

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

    キャンセル

  • 2015/05/04 18:48

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

    キャンセル

  • 2015/05/04 22:16

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

    キャンセル

  • 2015/05/04 22:23

    >>cableまたはconnectのいずれか、もしくは両方が
    選ばれていない状態で、ボタンをクリックされてしまうと、値段のところに
    NaN と表示されてしまう

    これの対策をしようと考えていたのですが、実際にはどのようにすればよいのでしょうか?

    キャンセル

  • 2015/05/04 22:28

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

    キャンセル

  • 2015/05/04 22:33

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

    キャンセル

  • 2015/05/04 22:39

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

    キャンセル

checkベストアンサー

0

こんにちは。
私だったら、次のように専用のfunctionを一つ作成すると思います。
ご参考になれば、幸いです。

    function calc() {
        var a = get_checked_value("cable");
        var b = get_checked_value("connect");
        var ans = a * b;

        var result = document.getElementById("result");
        result.innerHTML = "<p>料金は" + ans + "円です。</p>";

    }

    function get_checked_value(name) {

        var elements = document.getElementsByName(name);
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].checked) {
                return elements[i].value;
            }
        }

        return 0;
    }

コード

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/04 22:10

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

    キャンセル

  • 2015/05/04 22:20

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

    キャンセル

0

ykt68さんのご意見のように素直にjQueryを使う方がスッキリ書けると思います。
JavaScriptのみで書くのでしたらこんな感じでしょうか。
function calc(){ 
    var cable   = [].slice.call(document.getElementsByName("cable"));
    var connect = [].slice.call(document.getElementsByName("connect"));
    
    var a = cable.filter(checked)[0].value;
    var b = connect.filter(checked)[0].value;
    
    var ans = a * b; 
    var result = document.getElementById("result"); 
    result.innerHTML = "<p>料金は" + ans + "円です。</p>";
}

function checked(element) {
    return element.checked;
}
読みやすいか読みにくいかは正直微妙な線ですね…。
ECMAScript 5th準拠なのでIE8以下では動きません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/04 19:14

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

    キャンセル

  • 2015/05/04 19:20

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

    キャンセル

  • 2015/05/04 19:29

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

    キャンセル

  • 2015/05/04 19:40

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

    キャンセル

  • 2015/05/04 22:18

    回答ありがとうございます。ちょっと私にはまだ高度な内容でしたが、コード自体は見やすいと感じました。勉強させていただきます!

    キャンセル

0

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

元のループのコード、
 for(i=0;i<cable.length;i++){ 
    if(cable[i].checked){ 
      a = cable[i].value; 
    } 
 } 
は、以下のように、該当するものが見つかったときに 
break 
を入れたほうがよいと思います。
 for(i=0;i<cable.length;i++){ 
    if(cable[i].checked){ 
      a = cable[i].value;
      break; 
    } 
 } 
break がないと、i がある値のときに if 条件がtrue になって、
a の値が確定した後も(律儀に)、i = cable.length-1 となる
まで、ループが回ってしまいます。

以上です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/04 22:12

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    19307questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • for

    272questions

    for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

  • 関数

    246questions

    関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

  • if

    233questions

    if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。

  • ループ

    59questions

    ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します