Q&A
下記2つの条件を満たせば編集可能です。
・編集要項を書く
・本文に空白文字以外の変更を加える
配列に選択したradioのvalueを1つだけセットしたい。
・質問ごとにある1~7のradioボタンを選択していく。
・選択できるradioは各質問一つのみ。
・選択された各質問のradioのvalueを配列に1-10まで順番に入れていく。
発生している問題
・radioを選択しても配列に選択された値が入ってくれない。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>test</title> 9 <link rel="stylesheet" href="css/style.css"> 10</head> 11 12<body> 13 <div class="content"> 14 <div class="content__card"> 15 <span class="content__text">Q1: 懸命に努力をすれば、たいてい望むものを達成できる。</span> 16 <div class="content__flex"> 17 <div class="content__bg-text">同意する</div> 18 <div class="content__input-wrapper"> 19 <input type="radio" name="element" value="7"> 20 <input type="radio" name="element" value="6"> 21 <input type="radio" name="element" value="5"> 22 <input type="radio" name="element" value="4"> 23 <input type="radio" name="element" value="3"> 24 <input type="radio" name="element" value="2"> 25 <input type="radio" name="element" value="1"> 26 </div> 27 <div class="content__bg-text">同意しない</div> 28 </div> 29 </div> 30 <div class="content__card"> 31 <span class="content__text">Q2: 計画を立てたら、その通りに実行できると確信している。</span> 32 <div class="content__flex"> 33 <div class="content__bg-text">同意する</div> 34 <div class="content__input-wrapper"> 35 <input type="radio" name="element2" value="7"> 36 <input type="radio" name="element2" value="6"> 37 <input type="radio" name="element2" value="5"> 38 <input type="radio" name="element2" value="4"> 39 <input type="radio" name="element2" value="3"> 40 <input type="radio" name="element2" value="2"> 41 <input type="radio" name="element2" value="1"> 42 </div> 43 <div class="content__bg-text">同意しない</div> 44 </div> 45 </div> 46 <div class="content__card"> 47 <span class="content__text">Q3: 純粋な技能を必要とするゲームよりも、ある程度運が関与するゲームの方を好む。</span> 48 <div class="content__flex"> 49 <div class="content__bg-text">同意する</div> 50 <div class="content__input-wrapper"> 51 <input type="radio" name="element3" value="7"> 52 <input type="radio" name="element3" value="6"> 53 <input type="radio" name="element3" value="5"> 54 <input type="radio" name="element3" value="4"> 55 <input type="radio" name="element3" value="3"> 56 <input type="radio" name="element3" value="2"> 57 <input type="radio" name="element3" value="1"> 58 </div> 59 <div class="content__bg-text">同意しない</div> 60 </div> 61 </div> 62 <div class="content__card"> 63 <span class="content__text">Q4: 決意をすれば、ほとんど何でも学ぶことができる。</span> 64 <div class="content__flex"> 65 <div class="content__bg-text">同意する</div> 66 <div class="content__input-wrapper"> 67 <input type="radio" name="element4" value="7"> 68 <input type="radio" name="element4" value="6"> 69 <input type="radio" name="element4" value="5"> 70 <input type="radio" name="element4" value="4"> 71 <input type="radio" name="element4" value="3"> 72 <input type="radio" name="element4" value="2"> 73 <input type="radio" name="element4" value="1"> 74 </div> 75 <div class="content__bg-text">同意しない</div> 76 </div> 77 </div> 78 <div class="content__card"> 79 <span class="content__text">Q5: これまでに成し遂げてきたことは全て、自分の努力と能力によるものである。</span> 80 <div class="content__flex"> 81 <div class="content__bg-text">同意する</div> 82 <div class="content__input-wrapper"> 83 <input type="radio" name="element5" value="7"> 84 <input type="radio" name="element5" value="6"> 85 <input type="radio" name="element5" value="5"> 86 <input type="radio" name="element5" value="4"> 87 <input type="radio" name="element5" value="3"> 88 <input type="radio" name="element5" value="2"> 89 <input type="radio" name="element5" value="1"> 90 </div> 91 <div class="content__bg-text">同意しない</div> 92 </div> 93 </div> 94 <div class="content__card"> 95 <span class="content__text">Q6: 達成を目指して努力することが辛いので、通常は目標を設定しない。</span> 96 <div class="content__flex"> 97 <div class="content__bg-text">同意する</div> 98 <div class="content__input-wrapper"> 99 <input type="radio" name="element6" value="7"> 100 <input type="radio" name="element6" value="6"> 101 <input type="radio" name="element6" value="5"> 102 <input type="radio" name="element6" value="4"> 103 <input type="radio" name="element6" value="3"> 104 <input type="radio" name="element6" value="2"> 105 <input type="radio" name="element6" value="1"> 106 </div> 107 <div class="content__bg-text">同意しない</div> 108 </div> 109 </div> 110 <div class="content__card"> 111 <span class="content__text">Q7: 不運によって、物事の達成が妨げられることがある。</span> 112 <div class="content__flex"> 113 <div class="content__bg-text">同意する</div> 114 <div class="content__input-wrapper"> 115 <input type="radio" name="element7" value="7"> 116 <input type="radio" name="element7" value="6"> 117 <input type="radio" name="element7" value="5"> 118 <input type="radio" name="element7" value="4"> 119 <input type="radio" name="element7" value="3"> 120 <input type="radio" name="element7" value="2"> 121 <input type="radio" name="element7" value="1"> 122 </div> 123 <div class="content__bg-text">同意しない</div> 124 </div> 125 </div> 126 <div class="content__card"> 127 <span class="content__text">Q8: 本当にそれをしたければ、ほとんど何でも可能である。</span> 128 <div class="content__flex"> 129 <div class="content__bg-text">同意する</div> 130 <div class="content__input-wrapper"> 131 <input type="radio" name="element8" value="7"> 132 <input type="radio" name="element8" value="6"> 133 <input type="radio" name="element8" value="5"> 134 <input type="radio" name="element8" value="4"> 135 <input type="radio" name="element8" value="3"> 136 <input type="radio" name="element8" value="2"> 137 <input type="radio" name="element8" value="1"> 138 </div> 139 <div class="content__bg-text">同意しない</div> 140 </div> 141 </div> 142 <div class="content__card"> 143 <span class="content__text">Q9: 仕事上で起こるほとんどのことは、自分のコントロールを超えている。</span> 144 <div class="content__flex"> 145 <div class="content__bg-text">同意する</div> 146 <div class="content__input-wrapper"> 147 <input type="radio" name="element9" value="7"> 148 <input type="radio" name="element9" value="6"> 149 <input type="radio" name="element9" value="5"> 150 <input type="radio" name="element9" value="4"> 151 <input type="radio" name="element9" value="3"> 152 <input type="radio" name="element9" value="2"> 153 <input type="radio" name="element9" value="1"> 154 </div> 155 <div class="content__bg-text">同意しない</div> 156 </div> 157 </div> 158 <div class="content__card"> 159 <span class="content__text">Q10: 自分にとってあまりにも難しいことに取り組み続けるのは無意味だと思う。</span> 160 <div class="content__flex"> 161 <div class="content__bg-text">同意する</div> 162 <div class="content__input-wrapper"> 163 <input type="radio" name="element10" value="7"> 164 <input type="radio" name="element10" value="6"> 165 <input type="radio" name="element10" value="5"> 166 <input type="radio" name="element10" value="4"> 167 <input type="radio" name="element10" value="3"> 168 <input type="radio" name="element10" value="2"> 169 <input type="radio" name="element10" value="1"> 170 </div> 171 <div class="content__bg-text">同意しない</div> 172 </div> 173 </div> 174 <script src="script.js"></script> 175</body> 176 177</html>
js
1const radio = document.querySelectorAll('input'); 2const scoreA = []; 3 4radio.forEach(element => { 5 console.log(element) 6 element.addEventListener('click', () => { 7 if (element.checked && scoreA === '') { 8 scoreA.push(element); 9 } else if (element.checked && scoreA !== '') { 10 scoreA.push(element); 11 scoreA.shift(); 12 } 13 console.log(scoreA, scoreA.length); 14 }); 15});
試したこと
js radio value calc in array,
js radio value into array,,,と調べてみた。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
HTMLのelementだけelement1に変更した上で
js
1radio.forEach(element => { 2 element.addEventListener('click', () => { 3 const n = element.name.replace('element', '') - 1; 4 if (element.checked) { 5 scoreA[n] = element.value; 6 } 7 console.log(scoreA); 8 }); 9});
追記
element.name でradioのnameが取得されます。
今回では、element1 ~ element10ですね。
そこからreplaceによってelement部分を空白に置き換えます。
つまりelement8は8になります。
これで問題番号が取得できました。
配列の添字は1~10番目が0~9に対応しているので-1して、scoreAにおける添字nを取得しています。
投稿2021/05/18 23:38
編集2021/05/19 23:11
総合スコア3191
0
ここで書くのもあれですがteratailのバグ？で本文の修正が一切できません。
投稿2021/05/18 03:14
総合スコア52
それができないのです。
本文は30~1000文字で書き込めと表示されます。
あまりサイズが大きすぎるのでは
> 本文は30~1000文字で書き込めと表示されます。
エラーメッセージ通りに修正すればよいのては。
それで編集可能ならバグではないです。
すみません、編集できないです。
解決方法は開発者にしか分かりませんので、問い合わせてください。
https://teratail.com/contact/input
ありがとうございます。
早速お問い合わせしてみました。
もう一度、0から質問内容を編集してみます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/19 04:21
2021/05/19 04:50
2021/05/20 08:19