Question

我和儿子一起做测验，教他HTML。但是我遇到了一些JavaScript（没有jquery或任何其他库）的问题。一切正常，直到最后。它假设告诉我们有多少是对与错，而是我们未定义。

错误读取：未捕获TypeError：无法分配给只读属性＆＃39; innerHTML＆＃39;问题17 of 16

HTML

<body id="body">
    <div id="pokeBallL">&nbsp;</div>
    <div id="pokeBallR">&nbsp;</div>
    <div id="spacer">&nbsp;</div>
    <h2 id="tstat"></h2>
    <div id="test">&nbsp;</div>
</body>

的JavaScript

(function () {
"use strict";
/*global window,alert*/ 
var UIlogic = {
        myStuff: function () {
            var pos = 0, question, test, tstat, Myquestions, btnCheck, choice, choices, chA, chB, chC, chD, correct;
            Myquestions = [
                ["What decade wear you born?","1980's","1990's","2000's","2010's","A"],
                ["What activity do you like more","Gaming","Camping","Travelling","Sleeping","A"],
                ["Pick a color","Black","Pink","Red","Blue","A"],
                ["Pick a number","22","42","4","7","A"],
                ["Choose a weapon","Battleaxe","Sword","Daggers","pen","A"],
                ["Pick an animal","Tiger","Monkey","Elephant","Human","A"],
                ["Pick a music genre","Rock","Hip-hop","Country","Folk","A"],
                ["How many legs do Butterflies have?","4 legs","6 legs","2 legs","3 legs","A"],
                ["How many stripes are on the American flag?","13","15","7","19","A"],
                ["Which is the nearest star?","Centauri A","Sol","Sirius","Proxima Centauri","A"],
                ["Longest river in the world is...?","Mississippi","Nile","Amazon","Ohio","A"],
                ["Pick one...","PS4","PC Master Race","XB One","Puny Apple","A"],
                ["Pop or Soda?","Pop","Both","Soda","Soft Drink","A"],
                ["What is your favorite creature","Amphibian","Mammal","Reptile","Avian","A"],
                ["Pick a squad position","Squad Leader","FTL","","Grenadier","A"],
                ["The Zombie apocalypse has begun! CHoose your path...","Get to lifeboat","Live inside mountains","Hold-up above gas station","Become Zombie","A"]
            ];

            function _(x) {
                return document.getElementById(x);
            }
            function renderQuestion() {
                test = _("test");
                tstat = _("tstat").innerHTML = "Question " +(pos + 1)+ " of " +Myquestions.length;//seems to have an issue here
                if(pos >= Myquestions.length) {
                    test.innerHTML = "<h2>You got " +correct+ " out of " +Myquestions.length+ " questions correct!</h2>";
                    tstat.innerHTML = "<h2>Test completed</h2>";
                    pos = 0;
                    correct = 0;
                    return false;
                }
                question = Myquestions[pos][0];
                chA = Myquestions[pos][1];
                chB = Myquestions[pos][2];
                chC = Myquestions[pos][3];
                chD = Myquestions[pos][4];
                test.innerHTML = "<h3>"+question+"</h3><hr />";
                test.innerHTML += "<h4><input type='radio' name='choices' value='A'>"+chA+"</h4><br />";
                test.innerHTML += "<h4><input type='radio' name='choices' value='B'>"+chB+"</h4><br />";
                test.innerHTML += "<h4><input type='radio' name='choices' value='C'>"+chC+"</h4><br />";
                test.innerHTML += "<h4><input type='radio' name='choices' value='D'>"+chD+"</h4><br />";
                test.innerHTML += "<button id='btnCheck' class='btnClass'>Submit</button>";


                btnCheck = document.getElementById("btnCheck");
                btnCheck.addEventListener('click', checkAnswer, false);
            }
            renderQuestion();
            function checkAnswer() {
                choices = document.getElementsByName("choices");
                for(var i = 0; i<choices.length; i++) {
                    if(choices[i].checked){
                        choice = choices[i].value;
                    }
                }
                if(choice == Myquestions[pos][5]) {//somewhere here doesn't seem right either.
                    correct++;
                }
                pos++;
                renderQuestion();
            }
        }
    };
window.onload = function () {
    UIlogic.myStuff();
};
}());

Answer 1

分开这一行

tstat = _("tstat").innerHTML = "Question " +(pos + 1)+ " of " +Myquestions.length;//seems to have an issue here

进入这个：

tstat = _("tstat");
tstat.innerHTML = "Question " +(pos + 1)+ " of " + (Myquestions.length + 1);

Demo

Answer 2

我明白了......我改变了

var correct;

到

var correct = 0;

事实证明，索引没有计算，因为正确的是阅读NAN

虽然，我应该在进入之前首先检查无线电，但是非应答将正确回答。这就是我为此所做的......

function checkAnswer() {
    choices = document.getElementsByName("choices");
    var found = 1;
    for (var i = 0; i < choices.length; i++) {
      if (choices[i].checked) {
        choice = choices[i].value;

        found = 0;
        break;
      }
    }
    if(found == 1)
            {
            alert("Please Select Radio");
            return false;
            }
    if (choice === Myquestions[pos][5]) { //somewhere here doesn't seem right either.
      correct++;
    }
    pos++;
    renderQuestion();
  }

JS测验 - 未捕获错误 -

2 个答案: