{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Rolldiameter 的问题《HTML input type=“number” still returning a string》','https://www.manongdao.com/q-304134.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm new to javascript , I'm trying learning how functions etc in JS and trying to add 2 numbers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS ADD</title>
</head>
<body>
<h1>Funcitons is JS</h1>
<input type="number" id="num1">
<input type="number" id="num2">
<button type="button" onclick="addNumAction()">
Add
</button>
<script>
function addNum(n1, n2) {
return parseInt(n1) + parseInt(n2);
}
function addNumAction() {
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
var sum = addNum(n1, n2);
window.alert("" + sum);
}
</script>
</body>
</html>If I remove the parseInt() the value is treated as a string only , then what is the point of using <input type="number"> ?please explain to me.
what field to use for getting input as a number?
You can use
valueAsNumber(described on that page) to get the actual number value. So your code would then be:type="number"only for browser validation. But you get a string. And you may useparseInt(num1)or+before string.HTML Input elements are documented to return string representing a number. See the documentation here : Documentation of HTML Input
When you set input type="number" then these input field don't accept non numeric input but at the same time it doesn't make the input value type "number". The reason is inputted number contain digits as a subset of the valid characters, but they also contain completely non-numeric characters like spaces, hyphens and parenthesis.
tl;dr you're doing everything correctly already, just keep using parseInt.
type="number" tells the browser that the user should only be allowed to enter number characters, but deep down, it's still a text field.
Neither HTML nor HTTP really have the concept of data types (possibly because they aren't programming languages to begin with) and everything is a string. When you use another language to reach that information you may sometimes get some amount of magic as a feature (for instance, PHP will generate arrays from GET/POST fields that have paired square brackets on their names) but that's a feature of such other language.
In this case,
.valuebelongs to the DOM API and such API does have types. But let's see how it's defined. The<input>tag is represented by theHTMLInputElementinterface and thevalueproperty is of typeDOMString:In other words,
type="number"is a hint to implement client-side validation and appropriate GUI controls but the underlying element will still store strings.It's normal you get a string.
The purpose of the number type is that mobile browsers use this for showing the right keyboards and some browsers use this for validation purposes. For example the
emailtype will show a keyboard with the @ and '.' on the keyboard andnumberwill show a numeric keyboard.