Adding Prompt() to High/Low Game-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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.)