im new to javascript. i dont know what's wrong with my code
num1:<input id="num1" type="number">
num2:<input id="num2" type="number">
<button type="button" onclick="myFunction()">compute</button>
answer:<input id="demo" type="text"> and answer: <p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var ans = x + y;
document.getElementById("demo").innerHTML = ans;
}
</script>
Don't use an ID twice in an document and the values you get from the input fields are strings and you do an string addition, so you have to parse it to integer before. The HTML5 input type number onlys displays in some new browsers a field which is invalid for other characters than numbers, but you get a string when you read the value of it with javascript.
You can parse your strings with parseInt. If you want to support float, you can use parseFloat.
num1:<input id="num1" type="number">
num2:<input id="num2" type="number">
<button type="button" onclick="myFunction()">compute</button>
answer:<input id="demoInput" type="text"> and answer: <p id="demoHtml"></p>
<script>
function myFunction() {
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var ans = parseInt(x) + parseInt(y)
document.getElementById("demoInput").value = ans;
document.getElementById("demoHtml").innerHTML = ans;
}
</script>
By the way:
If you want to name two or more elements with the same ID, use the class attribute. And you get with document.getElementsByClassName("demo") an array of your elements.
Here is your answer ...
<button type="button" onclick="myFunction()">compute</button>
answer:<input id="demo" type="text"> and answer: <p id="demo"></p>
<script> function myFunction() {
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var ans = parseInt(x) + parseInt(y);
document.getElementById("demo").innerHTML = ans; }
</script>
You have the id="demo" twice. In case of input there is no innerHtml, it is value instead but thats not what you want. So use this:
document.querySelector("p#demo").innerHTML = ans;
When you get value from an input control you will get it as String type , even thought you set it as number type in html - this type is for text input restrictions only (you can enter only numbers to that textbox).
var ans = x + y;
Here you've simply "chained" the x and y strings to a new variable - that's what '+' operator does when used on strings.
Parsing (deserialization) of string objects to numbers can be done with parseFloat (converts to float type) and parseInt (converts to int type).
Also, you can check types ether by instanceof or with constructor:
if(ans.constructor === String){
}
parseIntorparseFloaton the numbers