时间戳

首页 > 解决方案 > JavaScript 乘法程序无法正常工作

javascript - JavaScript 乘法程序无法正常工作

问题描述

var num1 = Math.floor(Math.random()*9 + 1);
var num2 = Math.floor(Math.random()*9 + 1);
var num_multiple = num1 * num2;

var form = document.querySelector('form');
var input = form.querySelector('input');
var button = form.querySelector('button');
var quesiton = document.querySelector('.p1');
var result = document.querySelector('.p2');

quesiton.textContent = String(num1) + " multiplication " +  String(num2) + " = ? ";

form.addEventListener("submit",function(e){
    e.preventDefault;
    if(num_multiple === Number(input.value)){
        num1 = Math.floor(Math.random()*9 + 1);
        num2 = Math.floor(Math.random()*9 + 1);
        num_multiple = num1 * num2;
        quesiton.textContent = String(num1) + " multiplication " +  String(num2) + " = ? ";
        input.value = "";
        result.textContent = "good";
        input.focus();
    }
    else{
        input.value = "";
        result.textContent = "bad";
        input.focus();
    }
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div><p class="p1"></p></div>
    <form>
        <input type="text">
        <button>submit</button>
    </form>
    <div><p class="p2"></p></div>
    <script src="multiple.js"></script>
</body>
</html>

对不起，我不会说英语，所以我用翻译来翻译它。

问题是，如果 num_multiple 和 number (input.value) 值相等，“good”会很快出现并很快消失。另外， input.focus(); 不起作用。

问题是即使 num_multiple 和 number(input.value) 值不相等，也会在 question 中写入一个新问题。

我应该如何修复代码？

标签： javascript

解决方案

您忘记了 e.preventDefault 末尾的括号（使其成为函数）。除此之外，我还更新了您的代码以将其干燥。DRY 代表不要重复自己。您有几行重复的代码，我将它们放入一个函数setNumbers()中以使其干燥。我还将这些result.textContent行变成了一个三元运算符：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

var num1, num2, num_multiple
var form = document.querySelector('form');
var input = form.querySelector('input');
var quesiton = document.querySelector('.p1');
var result = document.querySelector('.p2');

function setNumbers(){
  input.value = "";
  num1 = Math.floor(Math.random() * 9 + 1);
  num2 = Math.floor(Math.random() * 9 + 1);
  num_multiple = num1 * num2;
  quesiton.textContent = String(num1) + " multiplication " + String(num2) + " = ? ";
  input.focus();
}

form.addEventListener("submit", function(e) {
  e.preventDefault();
  var correctAnswer = num_multiple === Number(input.value);
  result.textContent = correctAnswer ? "good" : "bad";
  if(correctAnswer){
    setNumbers()
  }
})

setNumbers()
<div>
  <p class="p1"></p>
</div>
<form>
  <input type="text">
  <button>submit</button>
</form>
<div>
  <p class="p2"></p>
</div>
<script src="multiple.js"></script>

推荐阅读