在使用按钮时，如何为用户输入使用参数而不是将其与 document.getElementById 连接？

Question

let score = 0;
var myArray = [1, 2, 3, 4, 5];

let randomNumber;

function GuessNumber() {

  var userGuess = document.getElementById("userInput").value;

  var i;
  for (i = 0; i < 1; i++) {
    var randomNumber = myArray[Math.floor(Math.random() * myArray.length)];
  }

  var userGuess = document.getElementById("userInput").value;

  if (userGuess == randomNumber) {
    alert("CONGRATULATIONS!!! YOU GUESSED IT RIGHT");
    score++;
  } else {
    alert("SORRY, The correct number was " + randomNumber);
    score = score - 1;
  }
  document.getElementById("GameScore").innerHTML = "Score: " + score;
}

<!doctype HTML>
<html>
  <body>
    <p id="GameScore">Score: 0</p>
    <button onclick="GuessNumber()">Start Game!</button>
    <input id="userInput" type="text">
  </body>
</html>

所以重点是，而不是写

var userGuess = document.getElementById("userInput").value

我希望用户的输入成为函数的参数。

然而，问题是我正在使用按钮启动该功能，所以我不确定该怎么做，因为用户输入是使用文本框进行的。

Answer 1

你的意思是这样的？

<!doctype HTML>
<html>
  <body>
    <p id="GameScore">Score: 0</p>
    <button onclick="GuessNumber(document.getElementById('userInput').value)">Start Game!</button>
    <input id="userInput" type="text">
  </body>
</html>

let score = 0;
var myArray = [2, 3];

let randomNumber;

function GuessNumber(userGuess) {

  var i;
  for (i = 0; i < 1; i++) {
    var randomNumber = myArray[Math.floor(Math.random() * myArray.length)];
  }

  if (userGuess == randomNumber) {
    alert("CONGRATULATIONS!!! YOU GUESSED IT RIGHT");
    score++;
  } else {
    alert("SORRY, The correct number was " + randomNumber);
    score = score - 1;
  }
  document.getElementById("GameScore").innerHTML = "Score: " + score;
}

Answer 2

只需将输入值传递给函数即可。
考虑使用 addEventListener 而不是内联事件处理程序。

let score = 0;
var myArray = [1, 2, 3, 4, 5];

function GuessNumber(userGuess) {
  var i;
  for (i = 0; i < 1; i++) {
    var randomNumber = myArray[Math.floor(Math.random() * myArray.length)];
  }
  if (userGuess == randomNumber) {
    alert("CONGRATULATIONS!!! YOU GUESSED IT RIGHT");
    score++;
  } else {
    alert("SORRY, The correct number was " + randomNumber);
    score = score - 1;
  }
  document.getElementById("GameScore").innerHTML = "Score: " + score;
}
document.querySelector('button').addEventListener('click', e=>{
  GuessNumber(document.getElementById("userInput").value);
});

<!doctype HTML>
<html>
  <body>
    <p id="GameScore">Score: 0</p>
    <button>Start Game!</button>
    <input id="userInput" type="text">
  </body>
</html>

在使用按钮时，如何为用户输入使用参数而不是将其与 document.getElementById 连接？

How do I use a parameter for the users input rather than connecting it with document.getElementById, while using a button?

javascript

parameters