A (silly) question related to numbers in JavaScript

[John_T]

Hello, I have a (silly) question that I would like to ask about a function in my JavaScript code related to numbers.

Part of the function is:
(Note that “original” is an input field in HTML with “type=number”.)

const updated = parseInt(original.value);

if(!original.value || isNaN(updated) {
    message.textContent = "Please enter a valid number";

When I tried to type “9+1” into the input field, the message “Please enter a valid number” pops up, which confuses me.

Under the first condition !original.value , since the input is not an empty string, it should return false, so it doesn’t satisfy the condition.

Under the second condition isNaN(updated) , the updated will turn “9+1” into “9”, which is a number, so it also doesn’t satisfy the condition.

As a result, the message should not pop up. Why did it though?

Thank y’all in advance for the advice!

[JeremyLT]

I don’t think you want isNaN. You should use Number.isNaN. I think isNaN("1+2") and similar is actually returning true.

[John_T]

@JeremyLT But doesn’t the parseInt function turn the string “9+1” into the number 9, which returns false under isNaN ?

[JeremyLT]

Nope, double check MDN’s article about the method. Also, you can try console logging what the function returns

[John_T]

@JeremyLT I have just tried console-logging console.log(isNaN(parseInt("9+1"))) , and the result is false .
Sorry I am still confused

[JeremyLT]

Ah, my brain skipped over the ‘parseint’.

You still shouldn’t use isNaN anymore but rather ‘Number.isNaN’.

This would suggest that ‘original.value’ is actually falsy. You don’t show the code updating that value, so it’s hard to say.

[John_T]

@JeremyLT “original.value” is falsy only if I did not type anything in the input element in HTML, so how can it be falsy when I type “9+1”?

Oh the other parts of the code are irrelevant, so I didn’t show them.

Any ideas?

[JeremyLT]

My idea is that you show the code that sets the value of “original.value”, lol

One of those two conditions is being met to trigger the body of the if statement.

[John_T]

@JeremyLT The original constant equals the ID of the input element in HTML using document.getElementById .

Hence, original.value is simply obtaining what the user typed in the input field.

[JeremyLT]

Ok, please show the code

[lasjorg]

The value of 9 + 1 in an input of type number is just an empty string. For that to work you would need an input of type text and then parse or eval the value.

---

<input type="number">

const input = document.querySelector("input");

input.value = "9 + 1";
console.log(input.value); // ""

input.type = "text";
input.value = "9 + 1";
console.log(eval(input.value)); // 10

[John_T]

@lasjorg Great point! I originally thought that, whatever can be typed in the input section after setting “type=number”, will be treated as a non-empty string in JavaScript. It turns out that although I can type “9+1”, it is treated as an empty string.

Thanks for helping me learn something new!

[JeremyLT]

This is why the full code helps I’m not as skilled with HTML and couldn’t quite guess what your code was doing without seeing it!

[John_T]

@JeremyLT Haha it’s okay, thanks for your input and advice as well!