为什么我在定义它时会得到 Uncaught TypeError？答案

【问题标题】：Why do I get Uncaught TypeError while I've defined it?为什么我在定义它时会得到 Uncaught TypeError？
【发布时间】：2019-11-17 03:58:34
【问题描述】：

我正在做一个测验，这里是 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”。感谢您提前提供任何帮助。

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

【问题讨论】：

全部：这只是一个错字。 @Majid：getElementsById 应该是 getElementById（单数）。
@T.J.Crowder 我的错。注意到了，谢谢。

标签： javascript html undefined typeerror

【解决方案1】：

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

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

您将输入的 value（它是 NULL 或 UNDEFINED，因为 getElementsByName 返回的 HTMLCollection（注意复数）没有 value 属性）到 @ 987654325@ 而不是输入本身。

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

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

【讨论】：

“你输入的值是输入的值（当页面加载时它是 NULL 或 UNDEFINED，因为它还没有被用户选择）” 不，它是 @987654327 @ 因为getElementsByName（注意复数）返回的 HTMLCollection 没有 value 属性。 More here.
@T.J.Crowder 是的，我完全同意你的看法。感谢您指出了这一点。我已经更正了答案。

【解决方案2】：

你必须为 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!";
        }

【讨论】：