未定义的变量和点击/键下事件协同工作

我只是在这里问，因为我觉得无论我查什么，我都没有得到问题的答案。此外，我的教授几乎不知道这些材料，也不会通过电子邮件回复或出现在他的办公室。他对任何学生都没有帮助，所以我需要一些帮助，拜托！

我们要编写一个JavaScript代码，它将在页面加载时显示一个随机生成的数学方程式。然后，用户输入他们的答案，然后点击回车键或单击提交按钮。然后，我应该比较随机生成的数字和用户回答的总和，并打印出某个文本的正确或不正确。如果用户正确，则有 5 秒的延迟，然后需要显示一个新方程式。

综上所述，我现在的问题是我的变量一直显示为未定义。我正在屏幕加载时创建随机方程，但是如果我尝试将总数传递给一个新函数进行比较，我只会一遍又一遍地未定义。这就是我的老师没有教我们任何关于范围或只涉及一个函数的代码的地方。我觉得我已经尝试了我所知道的所有方法，以及我在网上查找过的东西。关于我做错了什么的任何想法？或者有什么帮助可以教育我了解何时需要多个功能和可变范围？蒂亚

window.onload = display();
function display() {
var max = 10;
var random1 = Math.floor((Math.random() * Math.floor(max)));
var random2 = Math.floor((Math.random() * Math.floor(max)));
var total = random1 + random2;
//console test
console.log(random1);
console.log(random2);
document.getElementById('output').innerHTML = random1 + ' + ' + random2 + " = ";
compare(total); //I don't want this because then it doesn't wait for the onclick or the onkeydown events to happen before comparing.
}
function checkKey() {
if (event.keyCode == 13) {
compare();
}
}
function compare(total) {
var answer = document.getElementById('userAnswer').value;
console.log(answer);
console.log(total);
//    if (answer === total) {
//        document.getElementById('wrongRight').innerHTML = "Correct! A new equation will display shortly.";
//    } else {
//        document.getElementById('wrongRight').innerHTML = "Incorrect, Please try again";
//    }
}

这是我的html，这样你可以看到我正在访问哪些元素。我现在没有任何CSS。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiplication</title>
<script src="math.js" defer></script>
</head>
<body>
<h2>Below is a randomly generated equation. Please enter your answer</h2>
<p id="output">testing field for equation</p>
<input type="text" id="userAnswer" onkeydown="checkKey()" autofocus>
<button id="submitAnswer" onclick="compare()">Submit Answer</button>
</body>
</html>

这也是他对任务的要求，以防您对我要去的地方或必要的事情感到困惑。这是一个初学者javascript课程，就像我说的，他甚至不知道语法，必须不断查找。

编写一个程序来帮助学生学习乘法。使用 Math.random 生成两个正一位数整数，并在 html 文档中显示问题。然后，学生将在表单文本框(不是弹出窗口(中输入答案，并获得诸如"好！"或"否"之类的回复。请重试"。在否定回答上生成至少 2 个变体，以便学生获得一些变体。一旦学生得到正确的答案，他们应该得到一个新问题。查看此截屏视频以了解其功能：http://screencast.com/t/BuF7iNtrL(指向外部站点的链接。指向外部站点的链接。其他应该有效的方法：
页面加载时，输入框应获得焦点。
与错误答案关联的消息应显示为红色。
与正确答案关联的消息应显示为绿色。
用户应该能够通过单击提交按钮或点击返回键来提交答案。
在显示绿色消息之后和显示新公式之前，应该有三秒钟的暂停。

如果你要做的只是仇恨，那就不要帮忙了。我是一个菜鸟，真的很想好好使用 JavaScript，所以我需要问问题。

因此，您面临的问题是var total的作用域为定义它的函数。(详细了解var范围。要解决此问题，您只需total全局可用：

window.onload = display();
var total;
function display() {
var max = 10;
var random1 = Math.floor((Math.random() * max));
var random2 = Math.floor((Math.random() * max));
total = random1 + random2;
document.getElementById('output').innerHTML = random1 + ' + ' + random2 + " = ";
}
function checkKey() {
if (event.keyCode === 13) {
compare();
}
}
function compare(total) {
var answer = document.getElementById('userAnswer').value;
if (answer === total) {
document.getElementById('wrongRight').innerHTML = "Correct! A new equation will display shortly.";
} else {
document.getElementById('wrongRight').innerHTML = "Incorrect, Please try again";
}
}

另外，小尼特：Math.floor(10)等于10，所以没有理由在max周围做Math.floor。

我会先进一步分离你的逻辑。

我们可能希望能够轻松执行以下操作：

生成一个方程(并得到答案(

function generateEquation(){
const max = 10;
const random1 = Math.floor((Math.random() * Math.floor(max)));
const random2 = Math.floor((Math.random() * Math.floor(max)));
return {
equation: random1 + ' + ' + random2 + ' = ',
solution: random1 + random2,
}
}
console.log(generateEquation());

检索用户的答案

function getUserAnswer() {
return document.getElementById('userAnswer').value;
}
document.getElementById('testbtn').addEventListener('click', function() {
console.log(getUserAnswer());
});
setTimeout(() => {
console.log(getUserAnswer());
}, 2500);

<input type="text" id="userAnswer">
<div id="testbtn">Submit</div>

呈现内容

function render(content){
document.getElementById('content').innerHTML = content;
}
document.getElementById('render').addEventListener('click', function(){
render('do logic to determine content');
});

<div id="render">Re Render</div>
<div id="content"></div>

现在把它放在一起：

let equation;
render();
function generateEquation() {
const max = 10;
const random1 = Math.floor((Math.random() * Math.floor(max)));
const random2 = Math.floor((Math.random() * Math.floor(max)));
return {
equation: random1 + ' + ' + random2 + ' = ',
solution: random1 + random2,
}
}
function getUserAnswer() {
return document.getElementById('userAnswer').value;
}
function compare(x, y) {
if (x == y) {
console.log('correct');
render();
} else {
console.log('incorrect');
// ...  
}
}
document.getElementById('submit').addEventListener('click', function() {
compare(equationObj.solution, getUserAnswer())
});
function render() {
equationObj = generateEquation();
document.getElementById('equation').innerHTML = equationObj.equation;
}

<input type="text" id="userAnswer">
<div id="submit">Submit</div>
<div id="equation"></div>

我会把 CSS 留给你 =(

生成一个方程(并得到答案(

检索用户的答案

呈现内容

现在把它放在一起：

相关内容

最新更新

热门标签：