JavaScript Выдача правильного ответа рандомного выражения среди рандомных неправильных

118

29 апреля 2021, 11:00

Задача: нужно, чтобы ответ на выражение появлялся среди кнопок с вариантами ответа и при нажатии выдавал correct.

Я привязала нажимаемую кнопку к переменной, в которой выводится значение суммы. Далее я прописала, чтобы в трёх кнопках появлялись рандомные цифры, и если среди них появится значение суммы, будет correct. Но я не знаю, как сделать так, чтобы в рандоме чисел на кнопках обязательно был ответ на выражение. К тому же, мне кажется, что сейчас даже если числа на кнопке совпадут, correct не выйдет. Пожалуйста, подскажите, как мне реализовать задуманное.

var numbers = generateRandomNumbers(3); 
 
var squares = document.querySelectorAll(".square"); 
let numberDisplayFirst = document.querySelector("#numberdisplayfirst"); 
let numberDisplaySecond = document.querySelector("#numberdisplaysecond"); 
let amountDisplay = document.getElementById("amountDisplay"); 
 
function getRandomInt(min, max) { 
  return Math.floor(Math.random() * (max - min)) + min; 
} 
 
let firstNumber = getRandomInt(1, 10); 
let secondNumber = getRandomInt(1, 10); 
var sumNumbers = firstNumber * secondNumber; 
 
numberDisplayFirst.textContent = firstNumber; 
numberDisplaySecond.textContent = secondNumber; 
amountDisplay.textContent = sumNumbers; 
 
for (var i = 0; i < squares.length; i++) { 
    squares[i].textContent = numbers[i] 
    squares[i].addEventListener("click", function(){ 
        var clickedNumber = this.textContent; 
        if(clickedNumber === sumNumbers){ 
            alert("correct"); 
        } else { 
            alert("wrong");//игра заканчивается 
        } 
    }) 
} 
 
function generateRandomNumbers(num) { 
    var arr=[] 
    for (var i = 0; i < num; i++){ 
    arr.push(randomNumbers());     
    } 
    return arr; 
} 
 
function randomNumbers(){ 
    var first = Math.floor(Math.random() * 101); 
    return "" + first; 
} 
 
function sumNumbers(){ 
    var sumNumbers = Math.floor(Math.random() * numbers.length); 
    return numbers[sumNumbers]; 
}

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Игра на знание таблицы уравнений</title> 
        <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
        <h1><span id="numberdisplayfirst"></span> 
         x  
         <span id="numberdisplaysecond"></span> 
          =  
          <span id="amountDisplay"></span></h1> 
        <div id="container"> 
            <button class="square"></button>     
            <button class="square"></button> 
            <button class="square"></button> 
        </div> 
        <script src="Index.js"></script>     
    </body>     
</html>

Answer 1

Но я не знаю, как сделать так, чтобы в рандоме чисел на кнопках обязательно был ответ на выражение.

Переменную numbers нужно заполнять изначально не тремя, а двумя значениями (N-1, где N - кол-во кнопок), а затем добавлять в массив правильный ответ и перемешивать массив.

К тому же, мне кажется, что сейчас даже если числа на кнопке совпадут, correct не выйдет.

Так и есть, ошибка в условии, смотрите верный код ниже с комментариями.

Код:

var squares = document.querySelectorAll(".square"); 
 
// не 3, а 2 элемента заполняем 
var numbers = generateRandomNumbers(squares.length - 1);  
 
let numberDisplayFirst = document.querySelector("#numberdisplayfirst"); 
let numberDisplaySecond = document.querySelector("#numberdisplaysecond"); 
let amountDisplay = document.getElementById("amountDisplay"); 
 
function getRandomInt(min, max) { 
  return Math.floor(Math.random() * (max - min)) + min; 
} 
 
let firstNumber = getRandomInt(1, 10); 
let secondNumber = getRandomInt(1, 10); 
var sumNumbers = firstNumber * secondNumber; 
 
numberDisplayFirst.textContent = firstNumber; 
numberDisplaySecond.textContent = secondNumber; 
amountDisplay.textContent = sumNumbers; 
 
// добавляем в массив третий элемент = правильный ответ 
numbers.push(sumNumbers); 
// перемешиваем массив 
numbers.sort(function(){ return Math.random() - 0.5 }); 
 
for (var i = 0; i < squares.length; i++) { 
  squares[i].textContent = numbers[i] 
  squares[i].addEventListener("click", function() { 
    var clickedNumber = this.textContent; 
    /* 
      у вас было === - строгое равенство, но типы разные, поэтому оно не будет срабатывать  
      будет работать при нестрогом равенстве, как ниже исправлено, 
      или если приводить к одному типу, например, if (parseInt(clickedNumber) === parseInt(sumNumbers)) { 
    */ 
    if (clickedNumber == sumNumbers) { 
      alert("correct"); 
    } else { 
      alert("wrong"); //игра заканчивается 
    } 
  }) 
} 
 
function generateRandomNumbers(num) { 
  var arr = [] 
  for (var i = 0; i < num; i++) { 
    arr.push(randomNumbers()); 
  } 
  return arr; 
} 
 
function randomNumbers() { 
  var first = Math.floor(Math.random() * 101); 
  return "" + first; 
} 
 
function sumNumbers() { 
  var sumNumbers = Math.floor(Math.random() * numbers.length); 
  return numbers[sumNumbers]; 
}

<h1><span id="numberdisplayfirst"></span> x 
  <span id="numberdisplaysecond"></span> = 
  <span id="amountDisplay"></span></h1> 
<div id="container"> 
  <button class="square"></button> 
  <button class="square"></button> 
  <button class="square"></button> 
</div>