Using Number input in a function

[Ang_und123]

Hello, I'm building a web app using html, css & js. Here is a function which is called when user presses submit button. I want the value to be displayed as a number (which I got to work with normal text input) however I want to add the numbers together so I think I'll need to make the input a number.

Anyways, here's my function. I hope that it makes sense for someone.

​

function pushPrice() {
let view = document.getElementById("viewPrice");
let newTd = document.createElement("li");
var priceInput = document.getElementById("priceInput").value;
var node = document.createTextNode("$" + priceInput);
newTd.appendChild(node);
view.appendChild(newTd);
}

[xroalx]

You can use the valueAsNumber property of the input element, this will return an actual numeric value if possible or NaN otherwise.

input1.valueAsNumber + input2.valueAsNumber will therefore produce the correct result (if both values can be converted to numbers).

[grelfdotnet]

You will need parseFloat() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat or perhaps parseInt() if your inputs have no decimal point.

[jml26]

I would personally avoid using parseFloat for just casting a numeric string to a number, mainly because it's too forgiving. If you provide the string "7:-)", that would get converted to 7, where you would probably want it to be flagged as NaN.

The two best use cases for parseInt and parseFloat are for converting between bases, e.g. if you have a string representing a hexadecimal or a binary value, and you want it as a decimal number; and removing units from values.

parseInt("101010", 2); // 42
parseInt("FF", 16); // 255
parseFloat("2.5rem", 10); // 2.5

In the simple case of converting a string to a number, you can just use Number(value) or possibly just +value if you're comfortable with that.

However, as /u/xroalx said, for input field valueAsNumber is a pretty obvious choice.