前提・実現したいこと
チェックボックスに入力したら、他の配列にアクセスして、表示するようにしたいです。
発生している問題・エラーメッセージ
現状、チェックボックスにチェックしても、他の配列を参照せず、何も変わりません。どういうことでしょう? プログラムの構造に問題があると思います。教えて下さい。 具体的に、例えば、input type="radio" name="q2"にチェックすると、配列'q2'に'value'が格納します。 次に配列'rA'に他の配列'q1','q3'の要素をまとめます。 配列'rA'の中から"B"の数を、変数'rC'に代入します。その後、変数'rC'を1で割って%にしてから、変数'rD'に代入します。 そして変数'rC'と変数'rD'は'#result2'に右記のプログラムで代入されます。$('#result2').text(rD + Math.round(500 * (1/rC)) + '円'); 僕がしたい事はチェックボックスにチェックすると、すぐに'#result2'の文字が変わる事です。 しかし、今のところ、変わりません。 プログラミング初心者です。よろしくお願いします。
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3 4 5<head><meta charset="UTF-8"> 6 <title>Inv</title> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 8</head> 9<body> 10 <div id="quespage"> 11 <h4>500円で何を買おう?</h4> 12 <p>野菜<br> 13 <label><input type="radio" name="q1" value="B" checked>買う</label> 14 <label><input type="radio" name="q1" value="S">買わない</label> 15 </p> 16 <h4 id='result1'></h4> 17 <p>肉<br> 18 <label><input type="radio" name="q2" value="B">買う</label> 19 <label><input type="radio" name="q2" value="S" checked> 買わない</label> 20 </p> 21 <h4 id='result2'></h4> 22 <p>魚<br> 23 <label><input type="radio" name="q3" value="B">買う</label> 24 <label><input type="radio" name="q3" value="S" checked> 買わない</label> 25 </p> 26 <h4 id='result3'></h4> 27 </div> 28 <script type="text/javascript" src="Q1.js" charset="UTF-8"></script> 29</body> 30</html>
javascript
1$( function(){ 2 const q1 = ['B']; 3 const q2 = ['S']; 4 const q3 = ['S']; 5 6 7 $('input[name="q1"]').change(function() { 8 q1.pop(); 9 var result1 = $(this).val(); 10 q1.push(result1); 11 console.log(q1); 12 }); 13 $('input[name="q2"]').change(function() { 14 q2.pop(); 15 var result2 = $(this).val(); 16 q2.push(result2); 17 }); 18 $('input[name="q3"]').change(function() { 19 q3.pop(); 20 var result3 = $(this).val(); 21 q3.push(result3); 22 }); 23 24 const rA= q1.concat(q2, q3); 25 var rC= rA.filter(function(x){return x==='B'}).length; 26 var rD= Math.round(1/rC * 100) + '%'; 27 28 29 30 31 if(q1 == 'B'){ 32 $('#result1').text(rD + Math.round(500 * (1/rC)) + '円'); 33 }else{ 34 $('#result1').text('0%'); 35 } 36 37 if(q2 == 'B'){ 38 $('#result2').text(rD + Math.round(500 * (1/rC)) + '円'); 39 }else{ 40 $('#result2').text('0%'); 41 } 42 43 if(q3 == 'B'){ 44 $('#result3').text(rD + Math.round(500 * (1/rC)) + '円'); 45 }else{ 46 $('#result3').text('0%'); 47 } 48 49 50});
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/05 10:45