Simple JS calculator - Why isn't this if statement working?

Question

I decided to post this as a separate question since the topic is slightly different than my original post. I'm trying to build a simple calculator which converts human years into dog years. Users are asked to enter their age into a form. Then they click a button and their age in dog years is displayed beneath the form.

That's all working fine, but I'm trying now to add an if statement to prevent the form from being submitted with a blank string or the number 0. Presently, if someone enters the form with a blank string or zero and then clicks the button, they are told that they are 0 in dog years. Instead, I'd like a message to appear (same place, under the form) which instructs users to enter their age.

Here is the code I have so far:

HTML:

<div id="calculator">
      <form>
        <p>
        <label>What is your current age in human years?</p>
        <p><input type="text" id="humanYears"></label></p>
        <p>
        <button type="button" id="calculate">Calculate</button></p>
        <p>
        <span id="answer"></span>
        </p>
      </form>
    </div>

JS:

function calculateAge() {
  var humanYears = document.getElementById("humanYears").value;
    if (humanYears === 0 || "") {
      document.getElementById("answer").innerHTML = "Please enter your age in human years.";
      return;
    }

  var dogYears=humanYears * 7;

  document.getElementById("answer").innerHTML = "That means you are " + dogYears + " in dog years!";
}

document.getElementById("calculate").onclick = function() { calculateAge(); };

Any help would be greatly appreciated.

Syntax error, it has to be `if (humanYears === 0 || humanYears === "") {` — adeneo, Apr 19 '16 at 23:40

score 0 · Accepted Answer · answered Apr 19 '16 at 23:42

0

When using the or operator || you still need to add the full expression on both sides, also you need to put the number 0 in quotes, as it is treated like a string like so:

Working example

if (humanYears === "0" || humanYears === "") {
  document.getElementById("answer").innerHTML = "Please enter your age in human years.";
  return;
}

answered Apr 19 '16 at 23:42

omarjmh

13,632
6
34
42

1

That did it, thank you! – JSJunkie Apr 20 '16 at 00:06
1

Glad it worked! Someone down voted this? – omarjmh Apr 20 '16 at 00:08

score 0 · Answer 2 · edited Apr 19 '16 at 23:47

0

The solutions proposed may still have some downfalls. For instance, I can enter a letter, i can enter multiple spaces tec.

var humanYears = document.getElementById("humanYears").value.trim();
    if (!humanYears || isNaN(humanYears)) {
      document.getElementById("answer").innerHTML = "Please enter your age in human years.";
      return;
    }

edited Apr 19 '16 at 23:47

omarjmh

13,632
6
34
42

answered Apr 19 '16 at 23:45

Gacci

1,388
1
11
23

Negative numbers and many more... – It-Z Apr 19 '16 at 23:46
1

Thanks JordanHendrix for the editing. Did not realize – Gacci Apr 19 '16 at 23:48

timolawl · Answer 3 · 2016-04-20T00:21:19.207

If you want to match a range (e.g., ages 1-999), you can do the following:

function calculateAge() {
  var humanYears = document.getElementById("humanYears").value.trim();
    if (!humanYears.match(/^[1-9][0-9]?[0-9]?$/) || humanYears === '') {
      document.getElementById("answer").innerHTML = "Please enter your age in human years.";
      return;
    }

  var dogYears=humanYears * 7;

  document.getElementById("answer").innerHTML = "That means you are " + dogYears + " in dog years!";
}

document.getElementById("calculate").onclick = function() { calculateAge(); };

<div id="calculator">
      <form>
        <p>
        <label>What is your current age in human years?</p>
        <p><input type="text" id="humanYears"></label></p>
        <p>
        <button type="button" id="calculate">Calculate</button></p>
        <p>
        <span id="answer"></span>
        </p>
      </form>
    </div>

Anything else will return your string "Please enter your age in human years."

score -1 · Answer 4 · answered Apr 19 '16 at 23:48

You almost had it!

When you do document.getElementById("humanYears").value;, it returns a string, not a number.

Now when you're doing if (humanYears === 0 || ""), you're comparing a string to a number and this will return false. Just make your triple equals into a double equals and it should work. === -> ==

Hope this helps!

Simple JS calculator - Why isn't this if statement working?

4 Answers4