Struggling with making a little number guessing game

Question

How can I make "You got it!" message to pop up when my input is not only 5, but lower or equal to 5?

document.getElementById("my-button").onclick = function() {
  if (document.getElementById("my-input").value == "5") {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
}

What is my favorite numbers? 
<input type="text" id="my-input">

<button id="my-button">Submit</button>

Possible duplicate of [javascript if number greater than number](https://stackoverflow.com/questions/13079626/javascript-if-number-greater-than-number) and [issue with comparing two numbers in javascript](https://stackoverflow.com/questions/9094299) and [Check if input value is 300 or above](https://stackoverflow.com/questions/41270245) — adiga, Feb 12 '19 at 09:16

score 1 · Answer 1 · answered Feb 12 '19 at 09:08

You have to convert your value to a number using Number, and then compare it using <=.

document.getElementById("my-button").onclick = function() {
  if (Number(document.getElementById("my-input").value) <= 5) {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
}

What is my favorite numbers? 
<input type="text" id="my-input">

<button id="my-button">Submit</button>

score 0 · Answer 2 · answered Feb 12 '19 at 09:05

0

You need to convert the input value which is a string to number before comparing it.

In this case you can use parseInt

document.getElementById("my-button").onclick = function() {
  if (parseInt(document.getElementById("my-input").value, 10) <= 5) {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
}

What is my favorite numbers?
<input type="text" id="my-input">
<button id="my-button">Submit</button>

answered Feb 12 '19 at 09:05

brk

48,835
10
56
78

I suggest you to add more explanations about **why** this should be converted from string to int (ie : `"042" < "41" == true`) – Cid Feb 12 '19 at 09:08
or another example, `"-10" < "-42" == true` – Cid Feb 12 '19 at 09:19

nick zoum · Answer 3 · 2019-02-12T09:26:20.353

A slight issue with your question is that the type of the input is text rather than number. You can change the type of the input by doing <input type=number id="my-input">. If you want to keep the type you will have to check if the input is a number.

In either case you will have to convert the value of the input from string to number since numeric operations using strings are wrong most of the time (there are rare specific cases where the outcome is the same). The only difference between using text and number is having to check if the value of the input is valid, which you can do using isNaN after the conversion. I usually prefer forcing JavaScript to convert the text by using - 0 over parseInt or parseFloat, since it's scricter and will not convert "123test" to 123.

Here is a solution working with number

document.getElementById("my-button").addEventListener("click", function() {
  if (document.getElementById("my-input").value - 0 <= 5) {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
});

<input type="number" id="my-input">
<button id="my-button">Submit</button>

Here is a solution working with text

document.getElementById("my-button").addEventListener("click", function() {
  var value = document.getElementById("my-input").value - 0;
  if (isNaN(value)) {
    alert("Not a number");
  } else if (value <= 5) {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
});

<input type="text" id="my-input">
<button id="my-button">Submit</button>

Maheer Ali · Answer 4 · 2019-02-12T09:35:28.763

Actually when you access the value of <input> its a string. You can't use >,<,>=,<= between strings you use need to convert it into a number using parseInt()

document.getElementById("my-button").onclick = function() {
  let value = parseInt(document.getElementById("my-input").value)
  if (value <= 5) {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
}

What is my favorite numbers? 
<input type="text" id="my-input">

<button id="my-button">Submit</button>

score 0 · Answer 5 · answered Feb 12 '19 at 09:12

The value that u get from input type is string so u need to convert it to number with [ ParseInt, Number ] methods after that u can compare and everytings will work fine so i think it's better of u

let button = document.getElementById("my-button");
let value = document.getElementById("my-input");
button.on('click', function () {
    if (Number(value) <= 5) {
        alert("You got it!")
    } else {
        alert("Opps, wrong number. Please try again.")
    }
});

have a nice game

Struggling with making a little number guessing game

5 Answers5