おしえて

javascriptのエラーで質問です。

解決済

質問者：zzhikkkk
質問日時：2024/02/03 18:52
回答数：2件

javascript(html・css)で質問です。動画を見て、クイズ形式で正解すれば、 alertが出るというものを
作りたいんですが、何か画面を確認しながら、やっているのですが、全くの超初心者という
事もあって、エーラーが出て、調べても、どこが間違っているのか、まったく分かりません。
大変お手数ですが、どなたか、ご存じの方、教えて戴けないでしょうか？

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html,div,h1,h2,ul,li {
margin: 0;
padding:0;
}

h1 {
background-color:rgb(214,255,255);
color: rgb(121,149,240);
text-align: center;
margin-bottom: 20px;
}
h2 {
text-align: center;
font-size: 22px;
font-weight: normal;
}
ul {
text-align: center;
margin: 20px auto;
list-style: none;
}
.btn-box {
text-align: center;
}
.btn-box button {
background-color: rgb(196,196,214);
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.btn-box button:hover {
opacity: .7;
}

</style>
</head>
<body>
<h1>クイズ</h1>
<h2 id="question">ここに問題表示</h2>
<ul>
<li id="ans1">選択肢1</li>
<li id="ans2">選択肢2</li>
<li id="ans3">選択肢3</li>
</ul>

<div class="btn-box">
<button type="button" id="answer1" onClick="answerCheck(1)">回答1</button>
<button type="button" id="answer2" onClick="answerCheck(2)">回答2</button>
<button type="button" id="answer3" onClick="answerCheck(3)">回答3</button>
</div>

<script>
let question = {
[
"山形県のお米といえば?",
"1.ひとめぼれ",
"2.ほえぬき",
"3,こしひかり",
"3"
],
[
"山形県の果物といえば?",
"1.さくらんぼ",
"2.マンゴー",
"3,みかん",
"2"
],
[
"山形県の県庁所在地どこ?",
"1.天草市",
"2.東根市",
"3,山形市",
"3"
]
};
console.log(question[0][0]);

let quiz = document.getElementById('question');
let ans1 = document.getElementById('ans1');
let ans2 = document.getElementById('ans2');
let ans3 = document.getElementById('ans3');

let correct = 0;
let quizCnt = 0;
function quizSet() {
quiz.textContent = question(quizCnt)[0];
ans1.textContent = question(quizCnt)[1];
ans2.textContent = question(quizCnt)[2];
ans3.textContent = question(quizCnt)[3];
}
quizSet();

function answerCheck(ans) {
if(ans == question[quizCnt][4]) {
alert("正解!");
correct++;
} else {
alert("不正解、、、!");
}

quizCnt++;
if(quizCnt == question.length) {
quiz.textContent = `正解数は${correct}でした!`;
ans1.textContent ="";
ans2.textContent ="";
ans3.textContent ="";
} else {
quizSet();
}

}
</script>
</body>
</html>

<button type="button" id="answer1" onClick="answerCheck(1)">回答1</button> ←ここでエラー

通報する

この質問は特に男性の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

参考程度に

No.1ベストアンサー

回答者： gura_
回答日時：2024/02/04 09:57

zzhikkkk さん

　･････エーラーが出て、調べても、どこが間違っているのか、まったく分かりません。･････････

参考↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html,div,h1,h2,ul,li {
margin: 0;
padding:0;
}

h1 {
background-color:rgb(214,255,255);
color: rgb(121,149,240);
text-align: center;
margin-bottom: 20px;
}
h2 {
text-align: center;
font-size: 22px;
font-weight: normal;
}
ul {
text-align: center;
margin: 20px auto;
list-style: none;
}
.btn-box {
text-align: center;
}
.btn-box button {
background-color: rgb(196,196,214);
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.btn-box button:hover {
opacity: .7;
}

</style>
</head>
<body>
<h1>クイズ</h1>
<h2 id="question">ここに問題表示</h2>
<ul>
<li id="ans1">選択肢1</li>
<li id="ans2">選択肢2</li>
<li id="ans3">選択肢3</li>
</ul>

<div class="btn-box">
<button type="button" id="answer1" onClick="answerCheck(1)">回答1</button>
<button type="button" id="answer2" onClick="answerCheck(2)">回答2</button>
<button type="button" id="answer3" onClick="answerCheck(3)">回答3</button>
</div>

<script>
/*　ここが間違い
let question = {
[
"山形県のお米といえば?",
"1.ひとめぼれ",
"2.ほえぬき",
"3,こしひかり",
"3"
],
[
"山形県の果物といえば?",
"1.さくらんぼ",
"2.マンゴー",
"3,みかん",
"2"
],
[
"山形県の県庁所在地どこ?",
"1.天草市",
"2.東根市",
"3,山形市",
"3"
]
};
*/

let question = [[
"山形県のお米といえば?","1.ひとめぼれ","2.ほえぬき","3,こしひかり","3"
],[
"山形県の果物といえば?",
"1.さくらんぼ",
"2.マンゴー",
"3,みかん",
"2"
],
[
"山形県の県庁所在地どこ?",
"1.天草市",
"2.東根市",
"3,山形市",
"3"
]
];

console.log(question[0][0]);

let quiz = document.getElementById('question');
let ans1 = document.getElementById('ans1');
let ans2 = document.getElementById('ans2');
let ans3 = document.getElementById('ans3');

let correct = 0;
let quizCnt = 0;

function quizSet() {
/*　ここが間違い
quiz.textContent = question(quizCnt)[0];
ans1.textContent = question(quizCnt)[1];
ans2.textContent = question(quizCnt)[2];
ans3.textContent = question(quizCnt)[3];
*/
quiz.textContent = question[quizCnt][0];
ans1.textContent = question[quizCnt][1];
ans2.textContent = question[quizCnt][2];
ans3.textContent = question[quizCnt][3];
}
quizSet();

function answerCheck(ans) {
if(ans == question[quizCnt][4]) {
alert("正解!");
correct++;
} else {
alert("不正解、、、!");
}

quizCnt++;
if(quizCnt == question.length) {
quiz.textContent = `正解数は${correct}でした!`;
ans1.textContent ="";
ans2.textContent ="";
ans3.textContent ="";
} else {
quizSet();
}
}
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

懇切丁寧に、回答して頂き、本当にありがとうございまいた。記号の入力ミスで、動かったのですね。助かりました。

通報する

お礼日時：2024/02/04 12:24

No.2

回答者： Ogre7077
回答日時：2024/02/04 12:37

> エーラーが出て、調べても、どこが間違っているのか、

エラー表示が複数出ている場合は、最初の報告をまず見ましょう。

ご提示の場合ですと明確な文法違反があるので、
ページ表示の際に最初の報告として SyntaxError が表示されるはずです。
この文法違反があるのでスクリプト記載が無効化され、
スクリプトが無いのでボタンを押した際の処理が実行できず、
さらなるエラー表示が連発してしまうと推測します。

ですが、本質的に重要なのは最初の報告の SyntaxError の内容のみであり、
そこに書かれている場所(またはその前後)と説明文から、
間違いを特定することができます。

参考)
https://learn.microsoft.com/ja-jp/microsoft-edge …

余談ではありますが、

変数 question のデータ構造ですが、
配列の順番に特定の意味を持たせるのはお勧めできないので、
以下のようなデータ構造に見直しては如何でしょうか。

例)
// 問題型オブジェクトの配列
const questions = [ {q:問, c:[選択肢1, ...], a:答 }, ... ];
...
let qa = questions[番号]; // 配列から問題を順番に取る
問題 = qa.q; // 0番目とせずに名前をつけたプロパティから取る
選択肢1 = qa.c[0]; // 選択肢だけの配列から順番に取る
...
if (回答 = qa.a) { alert("正解"); }