Q&A
※コードのあらゆる部分がおかしかったので現在進行形で追記訂正中です。訂正後は訂正箇所を記述します。すみません
javascriptで簡単な質問と、回答するボタン、スコアを設置しましたが上手く表示されません
open with live serverで開いています。
クイズの書き方はそれぞれ別の方法で記述したつもりです。
クイズの正解は、①うさぎ、②タイガー尾崎、③A型なのですが、
・うさぎにボッチを入れて回答するをクリックしても、「不正解です」
タイガー尾崎以外にボッチを入れて回答しても、「正解です」
A型以外にぼっちを入れても「正解です」「不正解です」と続けざまにアラームが出て、しかも、スコアが正しくアラームされず、「点数は${score}です」とアラームが出ます
回答お願いします
html
omikuji.js
let score=0;
function omikuji(){
let randomNumber = Math.floor(Math.random() * 6 + 1);
$(".omikujii").text(randomNumber);
}
function answer1(){
if(value="1"){
$(".usagi").text("正解です");
score++;
}else{
} $(".usagi").text("不正解です"); }
function answer2(){
if(value="2"){ document.getElementById("ozaki").innerHTML="正解です！"; score++ }
}
function answer3(){
if(value="a"){
window.alert("正解です");
score++
}else{
}window.alert("不正解です"); window.alert("点数は${score}です");
}
回答1件
0
ベストアンサー
質問と回答のグループ分けができていないように見えます。
ラジオボタンですと、同じname属性のものがグループとみなされるため、
もしもすべて「name="answer"」としてしまうと、
質問を横断してその中から一つしか押せない（質問ごとに独立しない）ことになります。
JavaScriptからラジオボタンの値を取得するのに、
例えば document.getElementsByName('answer1');とすれば、「name="answer1"」となっている要素（のコレクション）が得られるので、
要素を一つ一つcheckedを確認してチェックされているか（オンになっているか）を調べます。
サンプルを示します。
JavaScript
1const answer1 = document.getElementsByName('answer1'); 2let checkValue = ''; 3for (let i = 0; i < answer1.length; i++) { 4 if (answer1.items(i).checked) { 5 checkValue = answer1.item(i).value; 6 } 7}
〈加筆〉
jQueryを使っているようなので、もっとコードをシンプルにできます。
全体のスコア判定のイメージでサンプルを示します。
下記のコードのanswer1ってのは、ラジオボタンにつけるnameであることに注意です。
:radio Selector | jQuery API Documentation
問題ごとにnameを変える必要があります。
JavaScript
1if ($('input:radio[name="answer1"]:checked').val() === '正解の値とか') { 2 score++; 3} 4if ($('input:radio[name="answer2"]:checked').val() === '正解の値とか') { 5 score++; 6} 7if ($('input:radio[name="answer3"]:checked').val() === '正解の値とか') { 8 score++; 9} 10if (score === 3) { 11 alert('全問正解'); 12} 13else if (score > 0) { 14 alert(score + '問正解、惜しい'); 15} 16else { 17 alert('不正解'); 18} 19
投稿2022/02/07 00:28
編集2022/02/08 02:23
退会済みユーザー
総合スコア0
回答ありがとうございます！以下のように訂正追加しましたが、改善されません、どうすればいいでしょうか？
omikuji.html
<h3>クイズ</h3>
<h4>①世界で一番可愛い動物は？</h4>
<form id="quiz-1">
<input name="answer1" type="radio" value="1">うさぎ<img src="\public\stylesheets\5fb01083.jpg"class="sampleImage" ></input>
<input name="answer1" type="radio" value="2">羊</input>
<input name="answer1" type="radio" value="3">あひる</input>
<button class="usagi" onclick="answer1();">回答する</button>
</form>
<h4>②私の好きな人は？</h4>
<form id="quiz-2">
<input name="answer2" type="radio" value="1">ウルフ金串</input>
<input name="answer2" type="radio" value="2">タイガー尾崎<img src="\public\stylesheets\60a48198bb.jpg"class="sampleImage" ></input>
<input name="answer2" type="radio" value="3">力石徹</input>
<button id="ozaki" onclick="answer2();">回答する</button>
</form>
<h4>3私の血液型は？</h4>
<form id="quiz-3">
<input name="answer3" type="radio" value="1">A型</input>
<input name="answer3" type="radio" value="2">B型</input>
<input name="answer3" type="radio" value="3">o型</input>
<button id="ti" onclick="answer3();">回答する</button>
</form>
<p id="total-massage"> </p>
<script>document.write("点数は${score}")
document.getElementsByName('answer1');
</script>
</html>
omikj.js
let score=0;
function answer1(){
if(quiz_1.answer.value=="1"){
$(".usagi").text("正解です");
score++;
}else{
} $(".usagi").text("不正解です");
}
function answer2(){
if(quiz_2.answer.value=="2"){
document.getElementById("ozaki").innerHTML="正解です！";
score++
}
}
function answer3(){
if(quiz_3.answer.value=="a"){
window.alert("正解です");
score++
}else{
}window.alert("不正解です");
}
document.getElementById("total-massage").innerHTML=("${score}です");
const answer1 = document.getElementsByName('answer1');
let checkValue = '';
for (let i = 0; i < answer1.length; i++) {
if (answer1.items(i).checked) {
checkValue = answer1.item(i).value;
}
}
回答のコメント欄に記入しても見づらいので、質問文に「追記」してください。
その際にコード箇所を選択した上で「＜／＞」ボタンを押すと見やすく加工されますので。
formにidをつけても、id名を使ってフォーム内入力要素の値にはアクセスできないので、
jQuery前提であれば、$('input:radio[name="answer1"]:checked').val() などとしてチェックが付いた値を取得します。
あなたの回答
tips
プレビュー
