我正在编写一个简单的测验应用程序。
在我尝试编辑所选单选按钮的字体之前，它一直运行良好。var labelStyle = userpick.style.fontWeight;
任何人都能发现问题吗？
另外，如果可能，建议改进代码？
我对checkAnswer函数做了一些新的更改
// define all the elements
var content = $("content");
var questionContainer = $("question");
var choicesContainer = $("choices");
var scoreContainer = $("score");
var submitBtn = $("submit");
//init variables
var currentQuestion = 0;
var score = 0;
var askingQuestion = true;
//shortcut for document.getElementById
function $(id){
return document.getElementById(id);
}
//askQuestion Function to load question into id = question
function askQuestion (){
var choices = quiz[currentQuestion].choices;
var choicesHtml = "";
//loop through chocies and create a radio button
for (var i = 0; i < choices.length; i++){
choicesHtml += "<input type = 'radio' name = 'quiz" + currentQuestion +
"' id = 'choice" + (i + 1) +
"' value ='" + choices[i] + "'>" +
"<label for ='choice" + (i + 1) + "'>" + choices[i] + "</label></br>";
}
//load the Question
questionContainer.textContent = "Q" + (currentQuestion + 1) + ". " + quiz[currentQuestion].question;
//load the choices
choicesContainer.innerHTML = choicesHtml;
//setup for the first time
if(currentQuestion === 0){
scoreContainer.textContent = "Score : 0 right answer out of " +
quiz.length + " possible.";
submitBtn.textContent = "Submit Answer";
}
}
//checkAnswer function to match user input with quiz.correctAnswer
function checkAnswer(){
//
if (askingQuestion){
submitBtn.textContent = "Next Question";
askingQuestion = false;
//determine if radio button is clicked
var userpick;
var correctIndex;
var radios = document.getElementsByName("quiz" + currentQuestion);
for (var i = 0 ; i < radios.length; i++){
if(radios[i].checked){
//if radio button is checked
userpick = radios[i].value;
}
if(radios[i].value == quiz[currentQuestion].correct){
correctIndex = i;
}
}
//if they got it right or wrong
var labelStyle = document.getElementsByTagName('label')[correctIndex].style;
labelStyle.fontWeight = "bold";
if (userpick == quiz[currentQuestion].correctAnswer) {
score++;
labelStyle.color = "green";
}else{
labelStyle.color = "red";
}
scoreContainer.textContent = "Score: "+ score + "right answers out of "+
quiz.length + " possible.";
}
function showFinalResults(){
content.innerHtml = "<h2> You've completed the quiz</h2" +
"<h2> Below are your results </h2>" +
"<h2>" + score + " out of " + quiz.length +
"questions, " + Math.round(score/quiz.length * 100) + "% </h2>";
}
}
window.addEventListener("load", askQuestion, false);
submitBtn.addEventListener("click", checkAnswer, false);
var quiz = [{"question": "Question 1: Grand Central Terminal, Park Avenue, New York is the world's",
"choices": ["A: largest railway station",
"B: highest railway station",
"C: longest railway station",
"D: None of the above"],
"correctAnswer": 0
},
{"question": "Question 2: Entomology is the science that studies",
"choices": ["A: Behavior of human beings",
"B: Insects",
"C: The origin and history of technical and scientific terms",
"D: The formation of rocks"],
"correctAnswer": 1
},
{"question": "Question 3: Friction can be reduced by changing from",
"choices": ["A: sliding to rolling",
"B: rolling to sliding",
"C: potential energy to kinetic energy",
"D: dynamic to static"],
"correctAnswer": 0
},
{"question": "Question 4: For seeing objects at the surface of water from a submarine under water, the instrument used is",
"choices": ["A: kaleidoscope",
"B: spectroscope",
"C: periscope",
"D: telescope"],
"correctAnswer": 2
},
{"question": "Question 5: Galileo was an Italian astronomer who",
"choices": ["A: developed the telescope",
"B: discovered four satellites of Jupiter",
"C: discovered that the movement of pendulum produces a regular time measurement",
"D: All of the above"],
"correctAnswer": 3
},
{"question": "Question 6: Habeas Corpus Act 1679",
"choices": ["A: states that no one was to be imprisoned without a writ or warrant stating the charge against him",
"B: provided facilities to a prisoner to obtain either speedy trial or release in bail",
"C: safeguarded the personal liberties of the people against arbitrary imprisonment by the king's orders",
"D: All of the above"],
"correctAnswer": 3
},
{"question": "Question 7: For galvanizing iron which of the following metals is used?",
"choices": ["A: Aluminium",
"B: Lead",
"C: Zinc",
"D: Copper"],
"correctAnswer": 2
}];<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang = "en">
<title> Quiz </title>
</head>
<body>
<div class = "page-header">
<h1>Simple Javascript Quiz</h1>
</div>
<div id = "content">
<h3 id = "question"> </h3>
<div id = "choices"> </div>
<button id = "submit">Submit</button>
<p id ="score"></p>
</div>
<script src = 'quiz2.js'></script>
</body>
</html>最佳答案
userpick.style.fontWeight;
无法读取未定义的属性“ fontWeight”
这意味着
userpick.style是undefined。相关代码：
var userpick;
for (var i = 0; i < radios.length; i++)
if(radios[i].checked){
userpick = radios[i].value;
如果未检查任何单选，将抛出
userpick.style.fontWeight，但错误将是无法读取未定义的属性“样式”
这意味着有一些已检查的单选，所以
userpick并非未定义。但是
userpick.style是不确定的。那就是因为收音机的value是一个字符串，并且默认情况下字符串没有style属性。可能您希望
userpick是已检查的单选，而不是其值var userpick;
for (var i = 0; i < radios.length && !userpick; ++i)
if(radios[i].checked)
userpick = radios[i];
但是，让我介绍
querySelector和:checked pseudo-class：var userpick = document.querySelector(".quiz" + currentQuestion + ":checked");