javascript - 无法读取未定义的属性 'fontWeight'

Question

我正在编写一个简单的测验应用程序。它工作正常，直到我尝试编辑所选单选按钮的字体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>

Answer 1

userpick.style.fontWeight;

Cannot read property 'fontWeight' of undefined

这意味着userpick.style是未定义。

相关代码:

var userpick;
for (var i = 0; i < radios.length; i++)
  if(radios[i].checked){
    userpick = radios[i].value;

如果没有检查 radio ，userpick.style.fontWeight 会抛出，但错误是

Cannot read property 'style' of undefined

这意味着有一些已检查的 radio ，因此 userpick 不是未定义的。

但是userpick.style未定义。那是因为 radio 的 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");