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

时间：2018-09-26 16:37:33

标签： javascript html scope var

我只是在这里问问题，因为我觉得无论我抬头什么，我都无法得到我的问题的答案。而且，我的教授几乎不知道这些材料，因此不发电子邮件或不出现在他的办公室。他对任何学生都没有帮助，所以我需要一些帮助，请！

我们要编写一个JavaScript代码，该代码将在页面加载后显示随机生成的数学方程式。然后，用户输入答案，然后按Enter键或单击“提交”按钮。然后，我应该比较随机生成的数字的总数，然后用户回答并打印出某些文本，以表示正确或不正确。如果用户正确，则会有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类，就像我说的那样，他甚至不知道语法，必须不断地查找内容。

  1. 编写一个程序，以帮助学生学习乘法。使用Math.random产生两个正数一位整数，并将问题显示在html文档上。然后，学生将在表单文本框（而不是弹出窗口）中输入答案，并得到回答，要么说“好！”。或“否。请重试”。在否定回答上至少产生2个变化，以便学生得到一些变化。一旦学生获得正确的答案，他们就应该提出一个新问题。请查看此截屏视频，以了解其功能：http://screencast.com/t/BuF7iNtrL（链接到外部站点。）链接到外部站点。其他应该起作用的东西：

  2. 页面加载时，输入框应获得焦点。

  3. 与错误答案相关的消息应显示为红色。
  4. 与正确答案相关的消息应显示为绿色。
  5. 用户应该能够通过单击提交按钮或单击返回键来提交答案。
  6. 在显示绿色消息之后并且在显示新方程式之前，应该有三秒钟的暂停时间。

如果您要做的就是仇恨，那就帮不上忙。我是一个菜鸟，真的想与JavaScript融洽相处，所以我需要提出问题。

2 个答案:

答案 0 :(得分：0)

因此，您面临的问题是[assembly: InternalsVisibleTo()] 的作用范围仅限于其定义的功能。（Learn more about var scoping.）要解决此问题，只需要将var total设置为全局可用：

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周围做Math.floor。

答案 1 :(得分：0)

我将从进一步分离您的逻辑开始。

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

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

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留给您=）

相关问题
最新问题