Блог

Главная - Вопросы по программированию - При возврате числа внутри getRandomNum оно возвращает undefined

При возврате числа внутри getRandomNum оно возвращает undefined

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я создаю игру, которая позволяет пользователю указывать 2 числа, и мне нужно указать случайное число между этими 2 числами и сравнить его с числами, которые они угадывают. У меня возникают проблемы при сравнении переменных внутри функции, которая является переменной const randomNum , и переменной внутри guessNumOne функции, чтобы увидеть, равны ли они или нет. Я попытался отобразить число, просто чтобы убедиться, что оно действительно присваивает число, но это не так: оно говорит «undefined».

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Guessing Game</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
  <script>
    // assigns random variable
    function getRandomNum(start, end) {
      return Math.floor((Math.random() * (end - start))   start);
    }

    // Assign global variables for userinput and the random number
    var start = parseInt(document.getElementById("numStart").value);
    var end = parseInt(document.getElementById("numEnd").value);
    var randomNum;
    randomNum = getRandomNum(start, end);

    // The function which checks if the random number equals the user inputs number
    function guessNumOne () {
      let firstGuess = parseInt(document.getElementById("firstGuess").value);
      let firstInputBox = parseInt(document.getElementById("firstGuess").value);
      let output = document.getElementById("answer");
      let correct = "You got it!";
      let incorrect = "Incorrect!";
      let randNum = randomNum;
      let disableInputOne = document.getElementById("firstGuess").disabled = false;
      let test = document.getElementById("display");
      test.innerText = randNum;
      if ( firstGuess != randNum) {
        firstInputBox.style.background = "red";
        output.innerHTML = wrong;
        disableInputOne = true;
      }
      if (firstGuess == randNum) {
        firstInputBox.style.background = "green";
        output.innerHTML = correct;
        disableInputOne = true;
        disableInputTwo = true;
        disableInputThree = true;
      }
    }
  </script>
</head>
<body>
  <h1 style="text-align: center"> Welcome to the Guessing Game!</h1>
  <hr>
  <div class="container">
    <div class="form-group">
      <label for="numStart">Starting Number</label>
      <input type="number" name="numStart" id="numStart" class="form-control" placeholder="Starting Number">
    </div>
    <div class="form-group">
      <label for="numEnd">Ending Number</label>
      <input type="number" name="numEnd" id="numEnd" class="form-control" placeholder="Ending Number">
    </div>
    <input class="btn btn-primary" type="submit" value="Submit" id="submit">
    <div id = "display"></div>
    <div class="form-group">
      <label for="firstGuess">Guess #1:</label>
      <input type="number" class="form-control" id="firstGuess">
    </div>
    <button type="submit" id="firstSub" class="btn btn-primary">Guess</button>
    <div class="container" id="answer"></div>
    <script>
      document.getElementById("firstSub").addEventListener("click", guessNumOne);
      document.getElementById("submit").addEventListener("click", guessNumOne);
    </script>
  </div>
</body>
</html>

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

1. getRandomNum принимает два параметра, но вы никогда не указываете их при вызове функции.

2. Я думаю, вы забыли передать параметры при вызове функции: randomNum = getRandomNum(start, end);

3. очень глупая ошибка, но она по-прежнему говорит undefined 🙁

4. Можете ли вы вставить фрагмент? Было бы проще отлаживать

5. При firstInputBox инициализации .value отсутствует

Ответ №1:

 var start = parseInt(document.getElementById("numStart").value);
var end = parseInt(document.getElementById("numEnd").value);

этот код не будет выполнен start и end не будет иметь значения. они должны быть внутри функции.

 var start, end, randomNum;
            function getRandomNum(start, end) {
                return Math.floor((Math.random() * (end - start))   start);
            }

            // Assign global variables for userinput and the random number

            

            // The function which checks if the random number equals the user inputs number
            function guessNumOne () {
                start = parseInt(document.getElementById("numStart").value);
                end = parseInt(document.getElementById("numEnd").value);
                randomNum = getRandomNum(start, end);