Question

我正在尝试进行一项有10个问题的简单数学测试。他们必须一次显示一个。我遇到了障碍，我不确定如何从这里前进。我做了一个提交按钮，我想我可以加载下一个问题onClick load但它比我想象的要复杂一点。任何建议都会非常感激。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Interactive Math Worksheet</title>
<script type="text/javascript">
var mathProblem = new Array();
var carryOver = document.getElementById("carry");
var correct = 0;
var wrong = 2;
// writing the problem 10 times
function writeProblem(){
    for (var i=1; i<11; i++){
        num1 = (Math.floor(Math.random()*50)+1);
        num2 = (Math.floor(Math.random()*50)+1);
        document.getElementById("top"+i).innerHTML = num1;
        document.getElementById("bottom"+i).innerHTML = "+" + num2;
        mathProblem[i] = num1 + num2;
        document.forms["problem"+i]["answer"+i].value = "";
}
}
function submitAnswer(){
    var i=0;

    for (i=1;i<11;x++) {
        if (document.forms["problem"+i]["answer"+i].value == mathProblem[i]) {
        return true;

    }
    else if(isNaN (document.forms["problem"+i]["answer"+i].value)){
            alert("This is not a spelling test please use numbers");
            return false;
    }

}
}
</script>
</head>
<body onload="writeProblem()">
<h2>Practicing Your Pluses!</h2>

<form name="problem1">
<input type="text" size="1" name="carry1"><br/> 
<label id="top1"></label><br />
<label id="bottom1"></label><br /><hr width="60px" align="left"/>
<input type="text" size="3" name="answer1">
</form><br/>

<input type="button" onClick="submitAnswer()" value="Submit Answers"/>

</body>
</html>

Answer 1

我认为上面的代码给出了这个错误

Uncaught TypeError: Cannot set property 'innerHTML' of null

因为在你的代码中writeProblem（）函数有错误，当函数调用文件只读取id为“top1”的元素时，另外的id不存在但是你重复循环11次，所以改变onload函数体根据Javascript的标准

我已更新代码，请检查一次JS Fiddle

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Interactive Math Worksheet</title>
<script type="text/javascript">
var mathProblem = new Array();
var carryOver = document.getElementById("carry");
var correct = 0;
var wrong = 2;
// writing the problem 10 times
function writeProblem(){
    for (var i=1; i<11; i++){
        num1 = (Math.floor(Math.random()*50)+1);
        num2 = (Math.floor(Math.random()*50)+1);
        document.getElementById("top").innerHTML = num1;
        document.getElementById("bottom").innerHTML = "+" + num2;
        mathProblem[i] = num1 + num2;
        document.forms["problem"]["answer"].value = "";
}
}
function submitAnswer(){
    var i=0;

    for (i=1;i<11;i++) {
        if (document.forms["problem"]["answer"].value == mathProblem[i]) {
        writeProblem();
        return true;

    }
    else if(isNaN (document.forms["problem"]["answer"].value)){
            alert("This is not a spelling test please use numbers");
            return false;
    }

}
}
</script>
</head>
<body onload="writeProblem()">
<h2>Practicing Your Pluses!</h2>

<form name="problem">
<input type="text" size="1" name="carry1"><br/> 
<label id="top"></label><br />
<label id="bottom"></label><br /><hr width="60px" align="left"/>
<input type="text" size="3" name="answer">
</form><br/>

<input type="button" onClick="submitAnswer()" value="Submit Answers"/>

</body>
</html>

Answer 2

SOLUTION

避免使用onload，onclick或任何内联事件或样式（read more）

注意：在此解决方案中，我使用完全支持的classList。

HTML

<div>
  <label class="top"></label><br />
  <label class="bottom"></label><br />
  <hr />
  <input class="answer" type="text">
</div>
<div>
  <label class="top"></label><br />
  <label class="bottom"></label><br />
  <hr />
  <input class="answer" type="text">
</div>    
<div>
  <label class="top"></label><br />
  <label class="bottom"></label><br />
  <hr />
  <input class="answer" type="text">
</div>    
<input id="submit" type="button" value="Submit"/>

CSS

div, input {
  width: 60px;
}
label {
  float: right;
  padding-right: 10px;
}
.invalid {
  border: 1px solid red;
}

JS

var mathProblem = [];
var tops = document.getElementsByClassName('top');
var bottoms = document.getElementsByClassName('bottom');
var answers = document.getElementsByClassName('answer');

function writeProblem(){
  for (var i=0; i<3; i++){
    num1 = (Math.floor(Math.random()*50)+1);
    num2 = (Math.floor(Math.random()*50)+1);
    tops[i].innerHTML = num1;
    bottoms[i].innerHTML = '+' + num2;
    mathProblem[i] = num1 + num2;    
  }
}
window.addEventListener('load', writeProblem);

function submitAnswer(){
  var invalid = document.getElementsByClassName('invalid');
  for(var i=0; i<invalid.length; i++){
    invalid[i].classList.remove('invalid');
  }
  var correct = 0;
  var wrong = 0;
  for (var a=0; a<3; a++) {
    var answer = answers[a];    
    if(isNaN(Number(answer.value))){
      answer.classList.add('invalid');
      alert('This is not a spelling test, please use numbers');      
      return false;
    }
    if(answer.value === ''){
      answer.classList.add('invalid');
      alert('Answer all questions please');
      return false;
    }
    if (Number(answer.value) === mathProblem[a]) {
      correct++;
    }
    else {
      answer.classList.add('invalid');
      wrong++;      
    }
  }
  alert('Correct: ' + correct + '\nWrong: ' + wrong);
}
document.getElementById('submit')
.addEventListener('click', submitAnswer);

试图一次显示一个问题。

2 个答案:

SOLUTION

HTML

CSS

JS