So i'm trying to create an html input based calculator, it just keeps returning *This is a snippet added on later, but How would i do this in jQuery *
[object HTMLInputElement][object HTMLInputElement]
so heres my code
<html>
<head>
</head>
<body>
<input id="nume" type="number">
<input id="num" type="number">
<input type="button" onclick="MyFunction()" value="Click to calculate">
<p id="f">Value Is: 0</p>
</body>
<script>
const something = document.getElementById("nume")
const somethingElse = document.getElementById("num")
function MyFunction(){
var values = something + somethingElse;
document.getElementById("f").innerHTML = "Value Is: " + values
}
</script>
you need to get value first. document.getElementById("nume").value You can do it this way
function MyFunction(){
var values = Number(document.getElementById("nume").value) + Number(document.getElementById("num").value);
document.getElementById("f").innerHTML = "Value Is: " + values
}
<html>
<head>
</head>
<body>
<input id="nume" type="number">
<input id="num" type="number">
<input type="button" onclick="MyFunction()" value="Click to calculate">
<p id="f">Value Is: 0</p>
</body>You have to use Number(document.getElementById("nume").value) to get the actual number. by just using document.getElementById("nume") you are getting the HTML DOM element and not the element's value.
<input><html>
<head>
</head>
<body>
<input id="nume" type="number"><br/>
<input id="num" type="number"><br/>
<input type="button" onclick="MyFunction()" value="Click to calculate"><br/>
<p id="f">Value Is: 0</p>
</body>
<script>
function MyFunction(){
var something=document.getElementById("nume").value;
var somethingElse = document.getElementById("num").value;
document.getElementById("f").innerHTML=Number(something)+Number(somethingElse);
}
</script>