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
– ggorlen, Commented Mar 3, 2021 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
– epascarello, Commented Mar 3, 2021 at 20:30
Also, patronAge == NaN is always going to be false because NaN is not equal to NaN — VLAZ
– VLAZ, Commented Mar 3, 2021 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
– Pablo Darde, Commented Mar 3, 2021 at 20:33

Keimeno · Accepted Answer · 2021-03-03 20:30:52Z

2

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

answered Mar 3, 2021 at 20:30

Keimeno

2,6591 gold badge17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonny Mnemonic Over a year ago

Thank you this was really helpful

DCR · Accepted Answer · 2021-03-03 20:40:29Z

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>

Collectives™ on Stack Overflow

If statement not working correctly in Javascript

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related