javascript - JS 测验 - Uncaught Error -

标签 javascript html

我正在和我儿子做一个测验来教他 HTML。但我在使用一些 JavaScript 时遇到了问题(没有 jquery 或任何其他库)。一切都正常,直到最后。它应该告诉我们有多少是对的,有多少是错的,但我们却得到了未定义的结果。

错误读取:未捕获类型错误:无法分配给第 17 题(共 16 题)的只读属性“innerHTML”

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();
};
}());

最佳答案

分隔此行

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

关于javascript - JS 测验 - Uncaught Error -,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30495383/

相关文章:

javascript - 空值会导致 NaN 结果

javascript - Alias ES6 解构

javascript - 在 iPad 上触摸滚动增量值

javascript - 选择标签默认选择空白项

javascript - Protractor :在页面中查找文本

javascript - 如何模拟 Node redis模块的createClient方法

javascript - 如何获取两个字符串中相同字符的数量?

jquery - 没有AM-PM和最小-最大的html5输入类型时间

html - 如何在左侧栏中创建子菜单

html - Bootstrap 3 水平对齐文本和 div 中间的跨度