###前提・実現したいこと
独学でHTML,CSS,jQueryを学習している者です。
下記項目でつまずいております。初めての質問で文章が長くなっており大変申し訳ありませんが、
ご教授願います。
HTML5,CSS3,jQueryを使用し、ローカルで完結する(サーバー系言語をしようしない)アンケートを作成中です。
デザインとして、毎質問のみ表示させており、ボタンをクリックすると次の質問に移動する設定にしております。
各質問にinput要素のラジオボタンを使用し、各valueに"1","0"等の数字を持たせて、
最後に全質問の結果の合計値を表示させようとしています。
【問題点】
jQueryのval()を用い、各質問でチェックされたinput要素のvalueを取得する際に、
click(下記right buttonをクリック)イベントで次の質問に移動すると、前の質問のチェックが消えてしまいます。
そのため、各質問のvalueの値(数字)を取得できないのですが、どのように対応したらよろしいでしょうか?
ご教授願います。
※ソースコードはアンケート項目が多く長いため、該当の部分のみ抜粋して下記に示しております。
###発生している問題・エラーメッセージ
javascript
1/**** console.log(Q1_result+":"+Q2_result+":"+Q3_result+":"+Q4_result); 2で各質問の回答(value)を取得するのですが、次の質問に行くごとに前の質問の結果のチェックが 3外れてしまい、値を取得できません(NaN になってしまいます) **********/ 41:NaN:NaN:NaN 5NaN:0:NaN:NaN 6NaN:NaN:0:NaN 7NaN:NaN:NaN:0
###該当のソースコード
HTML
1<!------------ question page ------------------> 2 <div class="Q_home_page"> 3 4 <!--------------- right_button 下記ボタンをクリックします ------------------> 5 <div class="right_button push"><button><i class="fa fa-chevron-right" aria-hidden="true"></i></button></div> 6 7 <!----------------- question erea 各質問の入れ物で、 8上記ボタンをクリックすることで、マージンを変更し、1問ずつ表示させるようにしております。 9※CSS省略--------------------> 10 <div class="question_view"> 11 <div class="question_box"> 12 13 <!------------------- each question 各質問です -------------------> 14 <!------------- Q1 -------------------> 15 <div class="each_question Q1"> 16 <h3>question 1</h3> 17 <h3>If you go to bar with boyfrend,which do you drink?</h3> 18 <div class="check_box"> 19 <label> 20 <img src="img/img_Ideal_girlfriend_questionnaire/example/sushi_small.jpg"> 21 <input type="radio" name="question" value="0"> 22 <span>Beer</span> 23 </label> 24 <label> 25 <img src="img/img_Ideal_girlfriend_questionnaire/example/hamburger_small.jpg"> 26 <input type="radio" name="question" value="0"> 27 <span>Other alcohol</span> 28 </label> 29 <label> 30 <img src="img/img_Ideal_girlfriend_questionnaire/example/pasta_small.jpg"> 31 <input type="radio" name="question" value="1"> 32 <span>soft drink</span> 33 </label> 34 </div> 35 </div> 36 <!------------- /Q1 -------------------> 37 <!------------- Q2 -------------------> 38 <div class="each_question Q2"> 39 <h3>question 2</h3> 40 <h3>Do you want to feed animals?</h3> 41 <div class="check_box"> 42 <label> 43 <img src="img/img_Ideal_girlfriend_questionnaire/example/sushi_small.jpg"> 44 <input type="radio" name="question" value="0"> 45 <span>Yes</span> 46 </label> 47 <label> 48 <img src="img/img_Ideal_girlfriend_questionnaire/example/hamburger_small.jpg"> 49 <input type="radio" name="question" value="1"> 50 <span>No</span> 51 </label> 52 <label> 53 <img src="img/img_Ideal_girlfriend_questionnaire/example/pasta_small.jpg"> 54 <input type="radio" name="question" value="0"> 55 <span>Neither Agree Nor Disagree</span> 56 </label> 57 </div> 58 </div> 59 <!------------- /Q2 -------------------> 60 <!------------- Q3 -------------------> 61 <div class="each_question Q3"> 62 <h3>question 3</h3> 63 <h3>When drive date,which do you want to ride cars?</h3> 64 <div class="check_box"> 65 <label> 66 <img src="img/img_Ideal_girlfriend_questionnaire/example/sushi_small.jpg"> 67 <input type="radio" name="question" value="1"> 68 <span>Sports car</span> 69 </label> 70 <label> 71 <img src="img/img_Ideal_girlfriend_questionnaire/example/hamburger_small.jpg"> 72 <input type="radio" name="question" value="0"> 73 <span>SUV</span> 74 </label> 75 <label> 76 <img src="img/img_Ideal_girlfriend_questionnaire/example/pasta_small.jpg"> 77 <input type="radio" name="question" value="0"> 78 <span>Small car</span> 79 </label> 80 </div> 81 </div> 82 </div> 83 </div> 84 </div>
JavaScript
1$(function(){ 2 3///// クリックイベント (マージンを変更し、かつ下記で質問の回答を取得しております)/////////// 4$("div.right_button").click(function(){ 5 6 ////// ecch question calculate クリックされた際に下記変数を用い、値を取得しております/////////////// 7 var Q1_result = parseInt($(".Q1 input[name='question']:checked").val()); 8 var Q2_result = parseInt($(".Q2 input[name='question']:checked").val()); 9 var Q3_result = parseInt($(".Q3 input[name='question']:checked").val()); 10 var Q4_result = parseInt($(".Q4 input[name='question']:checked").val()); 11 var Q5_result = parseInt($(".Q5 input[name='question']:checked").val()); 12 var Q6_result = parseInt($(".Q6 input[name='question']:checked").val()); 13 var Q7_result = parseInt($(".Q7 input[name='question']:checked").val()); 14 var Q8_result = parseInt($(".Q8 input[name='question']:checked").val()); 15 var Q9_result = parseInt($(".Q9 input[name='question']:checked").val()); 16 var Q10_result = parseInt($(".Q10 input[name='question']:checked").val()); 17 var resultALL = Q1_result + Q2_result + Q3_result +Q4_result + Q5_result + Q6_result + Q7_result + Q8_result + Q9_result + Q10_result; 18 19 /////////// console.log で取得結果を確認しますと、上記で示させて頂きましたエラーメッセージになります /////////////////// 20 console.log(Q1_result+":"+Q2_result+":"+Q3_result+":"+Q4_result); 21 22 23 24});
###試したこと
各変数(var Q1_resultなど)をクリック前に持っていく等しましたが、その場合ですと、イベントで値の取得が出来ず、常にNaNとなってしまいました。
each等もjQueryで試してみましたが、勉強不足か対応できませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/13 09:46