变量未定义和 onclick/onkeydown 事件协同工作

Question

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

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

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

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 class 就像我说的，他甚至不知道语法，必须不断地查找东西。

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

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

Answer 1

因此，您面临的问题是 var total 的范围仅限于它定义的函数。(Learn more about var scoping.) 要修复，您只需要使 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。

Answer 2

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

我们可能希望能够轻松执行这些操作：

生成方程式（并得出答案）

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 留给你 =)

变量未定义和 onclick/onkeydown 事件协同工作

Variables undefined and onclick/onkeydown events working together

html

javascript

scope

var

生成方程式（并得出答案）

检索用户的答案

渲染内容

现在把它们放在一起：