I created a high/low game that goes from 1-20. To take it a step further, I'm attempting to have the user pick the number to play against: pick between 1 - x (user input number). There are other parameters within the game that need to be tweaked as well with that change. I want to use specifically Prompt() for the user to select a number to play against, I'm just not sure how to add it as well as other changes that will need to be made. Any tips are appreciated!
var answer = Math.floor(Math.random()*20) + 1;
var no_of_guesses = 0;
var guesses_num = [];
function guessing(){
var user_guess = document.getElementById("guess").value;
if(user_guess < 1 || user_guess > 20 ){
alert("That number is not in range, try again!");
}
else{
guesses_num.push(user_guess);
no_of_guesses+= 1;
if(user_guess < answer){
outcome1.textContent = "Too low"
outcome2.textContent = "Number Of Guesses : " +
no_of_guesses;
outcome3.textContent = "Guessed Number Are: " +
guesses_num;
}
else if(user_guess > answer){
outcome1.textContent = "Too High"
outcome2.textContent = "No. Of Guesses : " +
no_of_guesses;
outcome3.textContent = "Guessed Number Are: " +
guesses_num;
}
else if(user_guess == answer){
outcome1.textContent = "You're Correct!!"
outcome2.textContent = "the Number was " + answer
outcome3.textContent = " You guessed it in " + no_of_guesses +"Guesses";
}
}
}
var outcome1 = document.getElementById("outcome1")
var outcome2 = document.getElementById("outcome2")
var outcome3 = document.getElementById("outcome3") <div class="container">
<h3>Guess between 1-20!</h3>
<input type="text" placeholder="Choose a number" id="picknum"><br>
<button onclick="guessing()" id="my_btn">GUESS</button>
<input type="text" placeholder="Guess a number in range" id="guess"><br>
<p id="outcome1">Are you feeling lucky?</p>
<p id="outcome2"></p>
<p id="outcome3"></p>
</div>
I am not quite sure why you want to use prompt() for the user dialogue. My snippet uses the already provided <input> element instead and avoids unnecessary repetitions in the code:
const answer = Math.floor(Math.random()*20) + 1,
guesses=[];
const inp=document.getElementById("guess"),
out=document.querySelectorAll("[id^=outcome]");
function guessing(){
const n=inp.value;
guesses.push(n);
[`The number ${n} is ${n==answer? "correct!" : "too "+(n<answer?"low.":"high.")}`,
`You had ${guesses.length} guesses.`,
`The guessed numbers were: ${guesses.join(", ")}.`].forEach((o,i)=>out[i].textContent=o)
}<div class="container">
<h3>Guess between 1-20!</h3>
<input type="text" placeholder="Guess a number in range" id="guess"><button onclick="guessing()" id="my_btn">GUESS</button><br>
<p id="outcome1">Are you feeling lucky?</p>
<p id="outcome2"></p>
<p id="outcome3"></p>
</div>If you're willing to put up with its UI limitations, calls to prompt return the user's input; you could use your existing code, changing only the first line of guessing() to read
var user_guess = prompt("What is your guess?")
(Note that prompt returns a string; you'll want to use Number(user_guess) when doing mathematical comparisons.)