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

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

ただいまの
回答率

91.00%

  • JavaScript

    13835questions

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

  • jQuery

    5824questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    3389questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

複数存在するinput valueの値をeachでまとめて集計する方法について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 535

C.Darrenport

score 5

前提・実現したいこと

いつもお世話になっております。
先ほど、別の質問をしましたが、本タイトルの内容も自力では解決出来ていないため、質問させて頂きます。
先ほどの質問に合わせて質問させて頂くと、論点がぼやける懸念があるため、本タイトルで質問させて頂きます。

【実現したいこと】
HTML要素のlabelをクリックすると、inputのvalueが変化するプログラムを作りました。
※まずinputのvalueに0(ゼロ)をcheckedで設定しておき、
labelをクリックすると、inputのvalueが1 or 2 に変化します。
※inputのvalueを変化させる関数コードが多くなり、論点がばやけそうなため記載しておりません。

labelとinputが複数あるため、jQueryの.each()を利用し、まとめて算出出来ないか
試していますが、上手く出来ないためご教授頂きたいです。

※各inputのvalueを個々に持って来て合計を算出方法は出来ました。
本プラグラムは自分自身の学習用で3つしかinputのvalueが存在しないため、個々の値をそれぞれ持ってきても
問題ないのですが、大量の値を扱う場合の処理も勉強したいため、質問させて頂きます。

該当のソースコード

    $(".target label").click(function(){
    $(".target input").each(function(){
      var score = $(this).val();
      //console.logで各valueは確認できました。
      console.log(score);
      //合計を出すために配列に入れて、
      //[0,1,0]などとし、
      //下記for文を用いて
      /*
      var sum = function(array){
        var sum = 0;
        for(var i=0,len=array.length; i<len; ++i){
          sum += array[i]
        };
        return sum;
      }
      */
      //算出しようと考ええていますが、
      //console.log()で配列の中身を確認すると配列に[0]のように各要素の1つの値しか
      //代入されません。
      //なにかしら良い方法や別の方法はないかご教授頂きたいです。
      var array = [score];
      console.log(array);
    });
    });
      <div class="gameView">

        <!--各divのclass=targetにinputの各target(target1,2,3)を入れております。-->
        <div class="target">

          <!--   target1のlabel  -->
          <label>
            <input type="radio" name="target1" value="0" checked="checked">
            <img class="ball" src="img/fireworks_game_ver1.0/fireworks/tama.png">
            <img class="explosion fireWorks" src="img/fireworks_game_ver1.0/fireworksPoor.png">
            <img class="halfhalf fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_small.png">
            <img class="half fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_middle.png">
            <img class="all fireWorks"  src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_big.png">
          </label>
          <div class="smoke">
            <img src="img/fireworks_game_ver1.0/fireworks/smork.png">
          </div>
        </div>

        <div class="target">
     <!--   target2のlabel  -->
          <label>
            <input type="radio" name="target2" value="0" checked="checked">
            <img class="ball" src="img/fireworks_game_ver1.0/fireworks/tama.png">
            <img class="explosion fireWorks" src="img/fireworks_game_ver1.0/fireworksPoor.png">
            <img class="halfhalf fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_small.png">
            <img class="half fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_middle.png">
            <img class="all fireWorks"  src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_big.png">
          </label>
          <div class="smoke">
            <img src="img/fireworks_game_ver1.0/fireworks/smork.png">
          </div>
        </div>

        <div class="target">
        <!--   target3のlabel  -->
          <label>
            <input type="radio" name="target3" value="0" checked="checked">
            <img class="ball" src="img/fireworks_game_ver1.0/fireworks/tama.png">
            <img class="explosion fireWorks" src="img/fireworks_game_ver1.0/fireworksPoor.png">
            <img class="halfhalf fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_small.png">
            <img class="half fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_middle.png">
            <img class="all fireWorks"  src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_big.png">
          </label>
          <div class="smoke">
            <img src="img/fireworks_game_ver1.0/fireworks/smork.png">
          </div>
        </div>
      </div>

試したこと#1

.changeを利用して値が変わるたびにvalueの値を取得しようと試みましたが、
changeが上手く発動せずに挫折しました。

  //changeで各inputのvalueの取得を試みた結果、chageが発動しない

    (function(){
      $(".target").each(function(){
        var label = $(this).find("label");
        //labelをクリックするとradioのvalueが変化するため
        $(this).find("input[type='radio']").change(function(){
      //各inputのvalueを下記で取得し、変数eachLabelPointに代入し、
          var eachLabelPoint = label.find("input").val();
      //変数sumで合計を算出しようとしました。
          var sum = parseInt(eachLabelPoint+0);
          console.log(sum);
          $(".scoreImgGood p").text(sum);
        });

      });
    })();

試したこと#2

下記コードで個々に値を持ってきて、合計を算出する方法は出来ました。

      //labelをclickした際にinputのvalueを別の関数で変化させて、
   //※inputのvalueを変化させる関数は記載しておりません。
   //下記関数で合計を算出しております。
      $(".target label").click(function(){
        var target1 = parseInt($("input[name='target1']").val());
        var target2 = parseInt($("input[name='target2']").val());
        var target3 = parseInt($("input[name='target3']").val());
        console.log(target1,target2,target3);
        var sum = target1+target2+target3;
        $(".speechBalloonComment").text(sum);
        });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/09/17 15:24

    HTMLも提示ください。

    キャンセル

回答 2

checkベストアンサー

+2

こういうのはダメですか。未検証ですが。
合計値を求めるだけなら sum に足し込んでいくだけ。一旦配列に入れておいて後で料理したいなら scores に push

$(".target label").click(function(){
    var scores = [];
    var sum = 0;
    $(".target input").each(function(){
        scores.push($(this).val());
        sum += $(this).val();
    });
    scores.forEach(function(score) {
        // do something                                                         
    });   
});


targets.push({ target: $(this), score: $(this).val() }); とかなら後でいかようにも料理できます。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/17 16:42

    回答有難うございます。
    sumに足し込んで行き、合計を算出出来ました。
    今回は合計を算出するのみで問題は解決しましたが、
    配列の処理は不慣れでforEachの理解が出来ていないため、別途ネット等で調べてみます。

    キャンセル

+1

合計については unauさんの回答でできると思います。

changeが上手く発動せずに挫折しました。

ラジオボタンは同じ name属性を持つ2つ以上の要素の中で、どれを選択しているか、という目的で使います。
なので同じ name属性が1つしかない場合は changeイベントが起こらないと思います。

<input type="radio" name="target1" value="0" checked="checked">
<input type="radio" name="target1" value="1">

formで送るなどの目的で input要素を使っているのであれば、label要素と input[type="radio"]要素ではなく、input[type="hidden"]で処理してはいかがでしょうか。

<input type="hidden" name="target1" value="0">

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/17 16:37

    回答有難うございます。
    changeの使い方について勉強になりました。
    radioボタンの目的等、基本的な説明、非常に助かりました。
    ※今回は簡単な2Dゲームを作成しており、targetをクリックした場合に得点を与えたいために
     inputのradioを使用しました。
     得点の合計はunauさんの回答で算出出来ました。

    キャンセル

  • 2017/09/17 17:32

    > 今回は簡単な2Dゲームを作成しており、targetをクリックした場合に得点を与えたいために
     inputのradioを使用しました。

    クリックするからといって input要素にする必要はありませんよ。divでもspanでもクリックは受け取れますよ。

    キャンセル

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

  • ただいまの回答率 91.00%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    13835questions

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

  • jQuery

    5824questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    3389questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。