Is there a way to utilize a parameter for the user's input instead of relying on document.getElementById when incorporating a button?

Question

Is there a way to utilize a parameter for the user's input instead of relying on document.getElementById when incorporating a button?

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

let randomNum;

function NumGuess(userInput) {

  var userGuess = userInput;

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

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

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

Trying to pass the user input as a parameter in the function instead of defining it within the function. However, faced with a challenge since user input is coming from a textbox triggered by a button click.

javascript parameters

Answer 1

Answer №1

To properly handle user input, it is best to pass the value of the input to the function.
It is recommended to use `addEventListener` instead of inline event handlers for better code organization and maintainability.

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>

Answer 2

To properly handle user input, it is best to pass the value of the input to the function.
It is recommended to use `addEventListener` instead of inline event handlers for better code organization and maintainability.

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>

Answer 3

Answer №2

Do you have something in mind that resembles this?

<!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 4

Do you have something in mind that resembles this?

<!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;
}

Is there a way to utilize a parameter for the user's input instead of relying on document.getElementById when incorporating a button?

Answer №1

Answer №2

Similar questions

PHP script is not successfully receiving the Ajax post request that is

Using AJAX within the $.when function to extract the first character from the returned string

executing ajax request to call a function, encountering partial success and encountering partial failure

Utilizing numerous X-axis data points in highcharts

Struggling to populate a nested array in a dropdown using AngularJS

"By setting the HTML input box to read-only, the JavaScript button has the

How can I extract the value from the object returned by an AJAX call?

Guide to implementing if else statements with Protractor

I am eager to display this JSON data using AngularJS tables

Exploring the World of Three.js Loaders

Finding the x and y coordinates of a rotated 3D cube using JavaScript

How to implement a "callWhenReady" function in JavaScript

Is there a way to conceal the headers during an ajax request?

Angular 2 eliminates the need for nesting subscriptions

Modifying one input can impact other input elements without any form of direct connection between them

showcasing products from database with the help of Angular 12

Ways to attach the close event to the jquery script

Unable to successfully add element to array using UIKit modal in vuejs

What strategies can be used to refactor nested callbacks in node and effectively pass parameters to each function within the callbacks?

Issue: TableHead inside an Expandable Row in MUI-Datatable is being duplicated for each row, causing the table to not be centered.Explanation: The