If statement not working correctly in Javascript

Question

I've written a program that should display an image of a beverage or an alert window depending on the user's age input. The problem is that regardless of what value is submitted it only executes the 'if' portion of the statement. None of the other conditions are being checked prior to execution. I have tried using getElementById with the element id in place of querySelector but the program did not run at at all. I have tried querySelector with the button tag as well as trying the input tag. That also did not work.

function strt() {
  let theButton = document.getElementById('aButton');
  theButton.addEventListener('click', verifyAge);
}

function verifyAge() {
  let patronAge = document.querySelector('age');
  let primaryImg = document.getElementById('mainImg');

  if (patronAge < 21) {
    primaryImg.src = 'images/cola.jpg';
  } else if (patronAge >= 21) {
    primaryImg.src = 'images/tallboy.jpg';
  } else if (patronAge <= 0) {
    alert('Please enter a valid number:');
  } else if (patronAge == NaN) {
    alert('That is not a valid number. Please try again.');
  }
}
window.addEventListener('load', strt);

<img src="images/bar&grill.png" alt="barandgrill" id="mainImg">
<br>
<form>
  <label for="age">Please enter your age:</label>
  <input type="text" id="age" required>
  <button id="aButton" type="button">Get Drinks</button>
</form>

Welcome to SO! Add `console.log(patronAge)` -- it's not a number, it's a DOM element, and it's probably null since it's `id="age"`, `"#age"`. You probably want `+document.querySelector('#age').value;` (untested) which accesses the `value` of the input element and parses it to a number. Also, you probably want `e.preventDefault()` to avoid form submission — ggorlen, Mar 03 '21 at 20:30
patronAge is a DOM element.... it is not going to be a number. Simple debugging with console.log() will show this. — epascarello, Mar 03 '21 at 20:30
Also, `patronAge == NaN` is always going to be `false` because [`NaN` is not equal to `NaN`](https://stackoverflow.com/q/6976721) — VLAZ, Mar 03 '21 at 20:31
Your code will never reach the 2nd "else if" because any value lower than 21 is lower than 0 too. — Pablo Darde, Mar 03 '21 at 20:33

score 2 · Answer 1 · answered Mar 03 '21 at 20:30

Instead of writing this:

let patronAge = document.querySelector('age');

you should write the following:

let patronAge = parseInt(document.querySelector('#age').value);

There are a few problems with your approach.

querySelector('age') looks for an element with tag age, this does not exist. Since you're using querySelector you need to specify a # symbol to search for an id.
You need to access the value of the HTMLElement
You need to parse the value as a number

Thank you this was really helpful – Jonny Mnemonic Mar 03 '21 at 21:18 — Jonny Mnemonic, Mar 03 '21 at 21:18

score 0 · Accepted Answer · answered Mar 03 '21 at 20:40

couple of minor problems. They are pretty easy to spot. Look over the snippet and let me know if you don't understand anything.

function strt() {
  let theButton = document.getElementById('aButton');
  theButton.addEventListener('click', verifyAge);
}

function verifyAge() {
  let patronAge = document.getElementById('age').value;
  let primaryImg = document.getElementById('mainImg');  
  
  if (patronAge < 21) {
    primaryImg.src = 'https://via.placeholder.com/120';
  } else if (patronAge >= 21) {
    primaryImg.src = 'https://via.placeholder.com/150';
  } else if (patronAge <= 0) {
    alert('Please enter a valid number:');
  } else if (typeof(patronAge) == 'string') {
    alert('That is not a valid number. Please try again.');
  }
}
window.addEventListener('load', strt);

<img src='https://via.placeholder.com/100' alt="barandgrill" id="mainImg">
<br>
<form>
  <label for="age">Please enter your age:</label>
  <input type="text" id="age" required>
  <button id="aButton" type="button">Get Drinks</button>
</form>

If statement not working correctly in Javascript

2 Answers2