有人可以更正我的 JS 代碼并告訴我為此做了什么嗎？我想知道我做錯了什么導致我的測驗問題及其替代方案無法在中央 div 內顯示。
背景關系化我的代碼：它是一個包含兩個問題的表單，在單擊“評估”按鈕之后，它的結果應顯示在頁面頂部，但是我現在的重點是了解如何進行測驗在 HTML/CSS 頁面中可見。
鏈接到 CodePen：我的代碼片段
const quizQuestions = {
questions = {
question: "What is the of the state of Pará?",
alternatives: {
0: "S?o Paulo",
1: "Guarulhos",
2: "Campinas",
3: "S?o Bernardo do Campo",
4: "S?o José dos Campos",
5: "Santo André",
6: "Ribeir?o Preto",
7: "Belém",
answer: "7"
},
{
question: "What is the capital of the state of Amapá?",
alternatives: {
0: "Osasco",
1: "Sorocaba",
2: "Mauá",
3: "Macapá",
4 "S?o José do Rio Preto",
5: "Mogi das Cruzes",
6: "Santos",
answer: "3"
};
document.getElementByClassName('.quiz-container ').addEventListener('click', function() {
let container =
document.querySelector('.quiz-container');
container.innerHTML = '<div ></div>';
for (const [key, value] of Object.entries(quizQuestion.alternatives)) {
container.innerHTML = `<input type="radio" name="choice" value="${key}"> ${value}`;
}
container.innerHTML = '<div><button type="submit" id="submit-button">Evaluate</button></div>';
document.getElementById('submit2').addEventListener('click', function(event) {
console.log('asdf');
event.preventDefault();
var selected = document.querySelector('input[type="radio"]:checked');
if (selected && selected.value == quizQuestion.answer) {
alert('It is super, super correct :D!');
} else {
alert('Unfortunately, it is incorrect :(!');
}
});
});body {
background: rgb(209, 29, 83);
margin: 0;
}
h1 {
background: rgb(255, 184, 201);
height: 60px;
margin: 0;
padding-left: 20px;
padding-top: 20px;
font-size: 45px;
text-shadow: 3px 3px 9px;
color: rgb(43, 29, 14);
}
.quiz-container {
text-align: left;
font-size: 25px;
background: rgb(255, 209, 220);
width: 700px;
height: 4000px;
margin: auto;
margin-top: 100px;
box-shadow: 9px 9px 10px;
margin-bottom: 60px;
}
button {
margin-left: 900px;
padding-top: 0;
margin-bottom: 60px;
}
.questions {
color: #000000;
text-align: center;
font-size: 15px;
}<head>
<h1>QUIZ centred in Brazil</h1>
</head>
<body>
<div class="quiz-container"></div>
<div>
<button type="submit" id="submit-button">Evaluate</button>
</div>
<script src="js/main.js"></script>
</body>uj5u.com熱心網友回復：
你的代碼有很多問題。
第一個問題是你quizQuestions的結構錯誤。它們應該是一組物件，每個物件都包含一個問題、一組備選方案和一個答案——我在代碼片段中更正了它。
第二個問題是如何獲取元素 - 唯一元素需要具有 unique ids 不要使用這樣的類 - 這就是document.getElementByClassName不存在的原因，因為它會document.getElementsByClassName因為類不像 id 那樣唯一。您還有一個.，它對于 css 選擇器或 jquery 是正確的，但未以這種獲取形式使用 - 我將其更新為使用 id，更正您的 css 以匹配。
我不確定你是如何嘗試做你正在做的一些事情，但這應該是一個可行的起點，讓你再次行動——我沒有包括問題檢查部分，因為這足以填滿這個框正如你所要求的。
const quizQuestions = [{
question: "What is the of the state of Pará?",
alternatives: [
"S?o Paulo",
"Guarulhos",
"Campinas",
"S?o Bernardo do Campo",
"S?o José dos Campos",
"Santo André",
"Ribeir?o Preto",
"Belém"
],
answer:7
},{
question: "What is the capital of the state of Amapá?",
alternatives: [
"Osasco",
"Sorocaba",
"Mauá",
"Macapá",
"S?o José do Rio Preto",
"Mogi das Cruzes",
"Santos"
],
answer:3
}];
window.onload = function (){
const container = document.getElementById('quiz-container');
quizQuestions.forEach((question, number) => {
let questionHTML = `<div ><h3>${question.question}</h3>`;
question.alternatives.forEach((value, key) => {
questionHTML = `<input type="radio" name="${number}choice" value="${key}">${value}<br />`;
});
questionHTML = "</div>";
container.innerHTML = questionHTML;
});
};body {
background: rgb(209, 29, 83);
margin: 0;
}
h1 {
background: rgb(255, 184, 201);
height: 60px;
margin: 0;
padding-left: 20px;
padding-top: 20px;
font-size: 45px;
text-shadow: 3px 3px 9px;
color: rgb(43, 29, 14);
}
#quiz-container {
text-align: left;
font-size: 25px;
background: rgb(255, 209, 220);
width: 700px;
height: 4000px;
margin: auto;
margin-top: 100px;
box-shadow: 9px 9px 10px;
margin-bottom: 60px;
}
button {
margin-left: 900px;
padding-top: 0;
margin-bottom: 60px;
}
.question {
color: #000000;
text-align: center;
font-size: 15px;
}<head>
<h1>QUIZ centred in Brazil</h1>
</head>
<body>
<div id="quiz-container"></div>
<div>
<button type="submit" id="submit-button">Evaluate</button>
</div>
<script src="js/main.js"></script>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/360250.html
標籤：javascript html css