'Showing an image based on a number range in Javascript

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


Solution 1:[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.

Solution 2:[2]

You should use PreferenceFragmentCompat, if using androidx libraries

public class SettingsFragment extends PreferenceFragmentCompat {
    @Override
    public void onCreatePreferences(Bundle savedInstanceState, String rootKey) {
        setPreferencesFromResource(R.xml.preferences, rootKey);
    }
}

and a parent Fragment is not required if it's only a single screen, instead use the Preference Fragment directly.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Simeon Ikudabo
Solution 2 cmak

Related Questions