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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

JavaScript

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

jQuery

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

Q&A

解決済

2回答

11021閲覧

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

C.Darrenport

総合スコア13

HTML5

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/09/17 05:59

編集2017/09/17 06:56

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

【実現したいこと】
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が存在しないため、個々の値をそれぞれ持ってきても
問題ないのですが、大量の値を扱う場合の処理も勉強したいため、質問させて頂きます。

###該当のソースコード

javascript

1 $(".target label").click(function(){ 2 $(".target input").each(function(){ 3 var score = $(this).val(); 4 //console.logで各valueは確認できました。 5 console.log(score); 6 //合計を出すために配列に入れて、 7 //[0,1,0]などとし、 8 //下記for文を用いて 9 /* 10 var sum = function(array){ 11 var sum = 0; 12 for(var i=0,len=array.length; i<len; ++i){ 13 sum += array[i] 14 }; 15 return sum; 16 } 17 */ 18 //算出しようと考ええていますが、 19 //console.log()で配列の中身を確認すると配列に[0]のように各要素の1つの値しか 20 //代入されません。 21 //なにかしら良い方法や別の方法はないかご教授頂きたいです。 22 var array = [score]; 23 console.log(array); 24 }); 25 });

html

1 <div class="gameView"> 2 3 <!--各divのclass=targetにinputの各target(target1,2,3)を入れております。--> 4 <div class="target"> 5 6 <!-- target1のlabel --> 7 <label> 8 <input type="radio" name="target1" value="0" checked="checked"> 9 <img class="ball" src="img/fireworks_game_ver1.0/fireworks/tama.png"> 10 <img class="explosion fireWorks" src="img/fireworks_game_ver1.0/fireworksPoor.png"> 11 <img class="halfhalf fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_small.png"> 12 <img class="half fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_middle.png"> 13 <img class="all fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_big.png"> 14 </label> 15 <div class="smoke"> 16 <img src="img/fireworks_game_ver1.0/fireworks/smork.png"> 17 </div> 18 </div> 19 20 <div class="target"> 21 <!-- target2のlabel --> 22 <label> 23 <input type="radio" name="target2" value="0" checked="checked"> 24 <img class="ball" src="img/fireworks_game_ver1.0/fireworks/tama.png"> 25 <img class="explosion fireWorks" src="img/fireworks_game_ver1.0/fireworksPoor.png"> 26 <img class="halfhalf fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_small.png"> 27 <img class="half fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_middle.png"> 28 <img class="all fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_big.png"> 29 </label> 30 <div class="smoke"> 31 <img src="img/fireworks_game_ver1.0/fireworks/smork.png"> 32 </div> 33 </div> 34 35 <div class="target"> 36 <!-- target3のlabel --> 37 <label> 38 <input type="radio" name="target3" value="0" checked="checked"> 39 <img class="ball" src="img/fireworks_game_ver1.0/fireworks/tama.png"> 40 <img class="explosion fireWorks" src="img/fireworks_game_ver1.0/fireworksPoor.png"> 41 <img class="halfhalf fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_small.png"> 42 <img class="half fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_middle.png"> 43 <img class="all fireWorks" src="img/fireworks_game_ver1.0/fireworks/fireworks_pink_big.png"> 44 </label> 45 <div class="smoke"> 46 <img src="img/fireworks_game_ver1.0/fireworks/smork.png"> 47 </div> 48 </div> 49 </div>

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

javascript

1 //changeで各inputのvalueの取得を試みた結果、chageが発動しない 2 3 (function(){ 4 $(".target").each(function(){ 5 var label = $(this).find("label"); 6 //labelをクリックするとradioのvalueが変化するため 7 $(this).find("input[type='radio']").change(function(){ 8 //各inputのvalueを下記で取得し、変数eachLabelPointに代入し、 9 var eachLabelPoint = label.find("input").val(); 10 //変数sumで合計を算出しようとしました。 11 var sum = parseInt(eachLabelPoint+0); 12 console.log(sum); 13 $(".scoreImgGood p").text(sum); 14 }); 15 16 }); 17 })();

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

javascript

1 //labelをclickした際にinputのvalueを別の関数で変化させて、 2 //※inputのvalueを変化させる関数は記載しておりません。 3 //下記関数で合計を算出しております。 4 $(".target label").click(function(){ 5 var target1 = parseInt($("input[name='target1']").val()); 6 var target2 = parseInt($("input[name='target2']").val()); 7 var target3 = parseInt($("input[name='target3']").val()); 8 console.log(target1,target2,target3); 9 var sum = target1+target2+target3; 10 $(".speechBalloonComment").text(sum); 11 });

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/09/17 06:24

HTMLも提示ください。
guest

回答2

0

ベストアンサー

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

js

1$(".target label").click(function(){ 2 var scores = []; 3 var sum = 0; 4 $(".target input").each(function(){ 5 scores.push($(this).val()); 6 sum += $(this).val(); 7 }); 8 scores.forEach(function(score) { 9 // do something 10 }); 11});

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

投稿2017/09/17 06:15

編集2017/09/17 06:19
unau

総合スコア2468

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

C.Darrenport

2017/09/17 07:42

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

0

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

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

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

HTML

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

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

HTML

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

投稿2017/09/17 07:14

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

C.Darrenport

2017/09/17 07:37

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

2017/09/17 08:32

> 今回は簡単な2Dゲームを作成しており、targetをクリックした場合に得点を与えたいために  inputのradioを使用しました。 クリックするからといって input要素にする必要はありませんよ。divでもspanでもクリックは受け取れますよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問