JavaScript

Jonathan Tucker
seal-mask
.a{fill-rule:evenodd;}techdegree
Jonathan Tucker
Full Stack JavaScript Techdegree Student 8,355 Points

JS quandary: Treating strings as numbers with conditional statements

Hello Treehouse Community! As part of a coding challenge I created a JS program in which we treated strings as numbers with conditional statements. I successfully built the original intent of the program which was to collect two number between 10 and 25. If the user doesn't put any number, then the If-Then stops the program and tells the user to try again. I noticed, however, that it was accepting values outside of the 10-25 parameter.

I need help creating the exception preventing the user from proceeding with putting a number less than 10 or greater than 25. I can't work out the logic in my head right now. Any advice is greatly appreciated.

Here's my code:

//Display an alert asking user to play
alert("Would you like to play a game? Click OK.");
alert("Please provide a low and high number between 10 and 25. Click OK to begin.");


// Collect input from a user
const inputLow = prompt("Please provide a low number");
const inputHigh = prompt("Please please provide a high number");


// Convert the input to a number
const lowNumber = parseInt(inputLow);
const highNumber = parseInt(inputHigh);


//Select the <main> HTML element
const main = document.querySelector("main");

//Check if lowNumber OR highNumber is not a number
if ( isNaN(lowNumber) && isNaN(highNumber) ) {
  main.innerHTML = 
    `<h2>You need to provide two numbers. Try again.<h2>`;
}
else {
//  Use Math.random() and the user's number to generate a random number
  const randomNumber = Math.floor( Math.random() * (highNumber - lowNumber + 1) ) + lowNumber;


//  Create a message displaying the random number
  main.innerHTML = 
    `<h2>${randomNumber} is a random number between ${lowNumber} and ${highNumber}.</h2> <p>Refresh browser to play again. Thank you!</p>`;
}

1 Answer

Cameron Childres
MOD
Cameron Childres
Treehouse Moderator 10,935 Points

Hi Jonathan,

One way to accomplish this would be adding the check with an "else if" statement:

if ( isNaN(lowNumber) && isNaN(highNumber) ) {
  main.innerHTML = 
    `<h2>You need to provide two numbers. Try again.<h2>`;
} else if ( lowNumber < 10 || highNumber > 25) {
  main.innerHTML = 
    `<h2>The first number must be greater than or equal to 10. The second must be less than or equal to 35. Try again.</h2>`
} else {
  const randomNumber = Math.floor( Math.random() * (highNumber - lowNumber + 1) ) + lowNumber;
  main.innerHTML = 
    `<h2>${randomNumber} is a random number between ${lowNumber} and ${highNumber}.</h2> <p>Refresh browser to play again. Thank you!</p>`;
}

Hope this helps! Let me know if you have any questions.

Jonathan Tucker
seal-mask
.a{fill-rule:evenodd;}techdegree
Jonathan Tucker
Full Stack JavaScript Techdegree Student 8,355 Points

That worked! I had originally used || In my first temp to spot a user's incorrect input, but then I got confused when using the < and >. Now it seems so simple. I guess I was making the logic more complicated then needed. Thank you, Cameron Childres!