Блог

Главная - Вопросы по программированию - Программы умножения JavaScript не работают нормально

Программы умножения 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) равны, «хорошо» появляется очень быстро и очень быстро исчезает. Кроме того, input.focus(); не работает.

Проблема в том, что новый вопрос записывается в quesiton, даже если значения num_multiple и number(input.value) не равны.

Как я должен исправить код?

Комментарии:

1. Как насчет использования a setTimeout ?

Ответ №1:

Вам нужно вызвать e.preventDefault , т.е. сделать e.preventDefault() вместо e.preventDefault . Это приводит к перезагрузке страницы (поведение отправки по умолчанию), следовательно input.focus() , не работает

Ответ №2:

Вы забыли скобки в конце 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>

Комментарии:

1. Это мой первый вопрос, и я очень рад получить такой замечательный ответ и благодарю вас. У меня есть еще один вопрос, но если ответ неправильный, вопрос будет обновлен новым вопросом, так можем ли мы снова не обновлять неправильный вопрос?

2. @banghogu Извините, я не совсем понимаю. Если у вас есть новый вопрос, который достаточно похож на этот текущий, вы можете задать его в комментариях или отредактировать этот вопрос, чтобы задать его. Если это что-то другое, возможно, вы захотите просто задать совершенно новый вопрос.

3. Извините, я пытался сказать, что если ответ был неправильным (num_multiple === Number (input.value)), я не хочу, чтобы Qesiton.textContent менялся на новый вопрос.

4. @banghogu Теперь я понимаю. Смотрите мою правку. Я переместил num_multiple === Number(input.value); строку в вызываемую переменную correctAnswer . Затем, если correctAnswer это true , он вызывает setNumbers() .

5. Это отличный ответ. Спасибо вам большое, очень большое. Сегодня я получил рекомендацию для этого сайта, и я думаю, что это действительно хорошо. Надеюсь, у вас хороший день.