为什么在我定义它时会出现 Uncaught TypeError？

Question

我正在做一个小测验，这里是 html :

   <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>English Test</title>
    <link rel="stylesheet" href="testCss.css">
</head>

<body>
    <br>
    <div style="font-size:20px">
    <p>Please choose the correct answer and at the end tap the score button. </p>

<br>
<div>
    2. I
    <select id="question2">
        <option value="_">_</option>
        <option value="Am">am</option>
        <option value="Is">is</option>
        <option value="Are">are</option>
    </select>
    22 years old.
    <span id="question2_answer"></span>
</div>
<br>
<br>
<div>
    101. When can we meet again?
    <span id="question101_answer"></span>
    <div>
        <input type="radio" name="question101" > When are you free?<br>
        <input type="radio" name="question101" > It was two days ago. <br>
        <input type="radio" name="question101" > Can you help me?
    </div>
</div>
<br> 
<br>
<div>
    8. What is your father like?
    <span id="question8_answer"></span>
    <div>
        <input type="radio" name="question8" > He likes listenning to music.<br>
        <input type="radio" name="question8" > He likes to play football. <br>
        <input type="radio" name="question8" > He is friendly.<br>
        <input type="radio" name="question8" > He has a car.
    </div>
</div>
<br>

<br>


<button id="button1" class="button" onclick="viewScore()">Score Result</button>
<br>
<input type="text" id="grade1" value="" readonly>
<br>

<script src="testJs.js"></script>

这是我使用的testJs.js：

     var score = 0;

    function viewScore() {
        var answer2 = document.getElementById("question2").value;
        var answer8 = document.getElementsByName("question8");
        var answer101 = document.getElementsByName("question101").value;


        if (answer2 == "Am") {
            document.getElementById("question2_answer").style.color = "green";
            document.getElementById("question2_answer").innerHTML = "&#10004";
            score += 1;
        } else {
            document.getElementById("question2_answer").style.color = "red";
            document.getElementById("question2_answer").innerHTML = "&#10006 Wrong!";
        }

        if (answer8[2].checked) {
            document.getElementById("question8_answer").style.color = "green";
            document.getElementById("question8_answer").innerHTML = "&#10004";
            score += 1;
        } else {
            document.getElementById("question8_answer").style.color = "red";
            document.getElementById("question8_answer").innerHTML = "&#10006 Wrong!";
        }
        if (answer101[0].checked) {
            document.

getElementsById("question101_answer").style.color = "green";
        document.getElementsById("question101_answer").innerHTML = "&#10004";
        score += 1;
    } else {
        document.getElementsByID("question101_answer").style.color = "red";
        document.getElementsByID("question101_answer").innerHTML = "&#10006 Wrong!";
    }


    if (score<=5) {
        document.getElementById("grade1").value = " Your total score is: "+ score+"    Your level is: "+"Elementary.";

    } else if(score<=8){
        document.getElementById("grade1").value = " Your total score is: "+ score+"    Your level is: "+"Pre Intermediate.";

    }else if(score<=15){
        document.getElementById("grade1").value = " Your total score is: "+ score+"    Your level is: "+"Intermediate.";

    }else{
        document.getElementById("grade1").value = " Your total score is: "+ score+"    Your level is: "+"Upper Intermediate.";

    }
    console.log(score);
    score = 0;
}

但是，我在问题 101 上遇到了以下错误。我检查了好几次，我不知道这个错误是从哪里来的！它指的是问题 101 并且提到不能读取属性 '0' of undefined。提前感谢您的帮助。

testJs.js:26 Uncaught TypeError: Cannot read property '0' of undefined at viewScore (testJs.js:26) at HTMLButtonElement.onclick (testHTML.html:57)

Answer 1

发生这种情况是因为在这一行中：

var answer101 = document.getElementsByName("question101").value;

您输入的值（为 NULL 或 UNDEFINED，因为 getElementsByName 返回的 HTMLCollection（注意复数形式）不'没有值属性) 进入 var answer101 而不是输入本身。

要解决此问题，请将上面的行更改为：

var answer101 = document.getElementsByName("question101");

Answer 2

您必须 select array (not value) for var answer101

var answer101 = document.getElementsByName("question101");

并更正 answer101 的内容

if (answer101[0].checked) {
            document.getElementById("question101_answer").style.color = "green";
            document.getElementById("question101_answer").innerHTML = "&#10004";
            score += 1;
        } else {
            document.getElementById("question101_answer").style.color = "red";
            document.getElementById("question101_answer").innerHTML = "&#10006 Wrong!";
        }

为什么在我定义它时会出现 Uncaught TypeError？

Why do I get Uncaught TypeError while I've defined it?

html

javascript

undefined

typeerror