Showing an image based on a number range in Javascript

Question

I am trying to create a javascript program that prompts the user for a number. If a user puts in a number that is less then 21, an image of soda will show. If the number is 21 or greater, the image is beer. There is an image of a bar that is shown when the page loads. Negatives and non-numbers are not allowed in the code. I have worked on this code for over a couple of days and the code does run. The only problem I have with it is that it will say that any input is an invalid entry. I have looked around for any solutions and I'm not sure what to do. I am new to javascript and any help would be appreciated.

Below is the javascript I am using:

function start()
{
  let button1 = document.getElementById("button1");
  button1.onclick = toggleContent;
}

function toggleContent()
{
  let number = document.getElementById('number');
  let liquid = document.getElementById('Bar');

  if parseInt(number <= 20)
  {
      liquid.src = 'assets/Soda.png';
      liquid.alt = 'Spicy water';
  }
  else if (number >= 21)
  {
    liquid.src = 'assets/Beer.png';
    liquid.alt = 'Angry Juice';
  }
  else if (isNaN(number) || number < 0)
  {
    alert("Invalid Entry. Enter a Number.")
  }
}
window.onload = start;

Here is the HTML code that goes with it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ID Check?</title>
    <script src="scripts/pt2script.js"></script>
  </head>
  <body>
    <img id="Bar" src="assets/barimage.png" alt="Image of a Bar Sign.">
    <p>Enter a number into the text box.</p>
    <input type="text" id="number" value="Enter a number...">
    <button onclick="toggleContent()" id="button1">Submit</button>
  </body>
</html>

You are attempting to parse a boolean value. (number <= 20) is a boolean that will either return true or false. It cannot be parsed as an integer. — Simeon Ikudabo, Feb 18 '20 at 19:41
It is written incorrectly, that is what I mean by that. Parser will throw an error which you should see in your developer tools. — epascarello, Feb 18 '20 at 19:41
Ohhh okay. Im using Atom so I don't see errors or have a debugger — Peter Missick, Feb 18 '20 at 19:45
How do you test your code, if you don't run it in a browser (which all have debuggers)? — Rickard Elimää, Feb 18 '20 at 19:47

Nina Scholz · Accepted Answer · 2020-02-18T19:50:42.103

You need to get the value from input and convert it to a number by using an unary plus +.

function start() {
    let button1 = document.getElementById("button1");
    button1.onclick = toggleContent;
}

function toggleContent() {
    let number = +document.getElementById('number').value; // take value as a number
    let liquid = document.getElementById('Bar');

    if (isNaN(number) || number < 0) { // move exit condition to top and exit early
        alert("Invalid Entry. Enter a Number.")
        return;
    }

    if (number <= 20) { // condition without parseint 
        liquid.src = 'assets/Soda.png';
        liquid.alt = 'Spicy water';
    } else { // no need for another check
        liquid.src = 'assets/Beer.png';
        liquid.alt = 'Angry Juice';
    }
}

window.onload = start;

<img id="Bar" src="assets/barimage.png" alt="Image of a Bar Sign.">
<p>Enter a number into the text box.</p>
<input type="text" id="number" placeholder="Enter a number..."><!-- use placeholder -->
<button onclick="toggleContent()" id="button1">Submit</button>

Or any of the options listed in the answers to [Convert a string to an integer?](https://stackoverflow.com/q/1133770/215552) — Heretic Monkey, Feb 18 '20 at 19:43
+1 for usage of unary plus, I hadn't heard of that before. Here is an interesting answer showing the differences between unary + and the classic parseInt(). https://stackoverflow.com/questions/17106681/parseint-vs-unary-plus-when-to-use-which/17106702#17106702 They seem to behave the same for most intended use cases but have different nuances. — Adam Specker, Feb 18 '20 at 21:05

score 1 · Answer 2 · answered Feb 18 '20 at 19:49

1

You are attempting to convert a boolean to an integer. This will not work sense (num >= 20) or whatever will evaluate to true or false, and not a number (NaN). You can convert the value to a number before trying to do a logical comparison. I'd do something such as:

$('.btn').on('click', function() {
    let val = $('#num').val();
    val = parseInt(val);
    if(val >= 21) {
        $('img').attr('src', '/path-to-soda');
    }
    else {
        $('img').attr('src', '/other-path');
    }
});

As soon as an event triggers your number comparison I would instantly convert it to a number (i'm assuming you are using a number input which will do this for you), and then perform the logical operation. If you're using a number input (which again, i'm just assuming), you won't even need to convert the value to a number. That's only necessary if you're using a text input or something along those lines.

answered Feb 18 '20 at 19:49

Simeon Ikudabo

2,152
1
10
27

1

JQuery isn't tagged – zfrisch Feb 18 '20 at 19:56
1

@zfrisch jQuery is just a JavaScript library for DOM manipulation which is irrelevant to the issue the OP had. I could've used Common Lisp pseudo code and he would've gotten the point. – Simeon Ikudabo Feb 18 '20 at 19:58
2

You could have also used code from the question itself, in which case the OP (and everyone else) would have definitely gotten the point... – Heretic Monkey Feb 18 '20 at 20:07
1

@zfrisch The issue was that the OP was attempting to parse a boolean value to an integer. Nothing in this code makes that "not obvious", especially when I explained that in my answer. Actually, the logical comparison and storing the variable is the exact same because jQuery is just a library for other things that were unrelated to the OP's question. – Simeon Ikudabo Feb 18 '20 at 20:28

Showing an image based on a number range in Javascript

2 Answers2