Creating HTML Input based calculator

Question

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 are currently trying to add the html elements together instead of the input's value, use their `.value` property to get the value. Note though it will be a string so you have to convert it first to a number otherwise you will be concatenating strings instead of adding numbera — Patrick Evans, Sep 05 '21 at 04:25
Does this answer your question? [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — Deepak Kamat, Sep 05 '21 at 05:03

score 1 · Answer 1 · answered Sep 05 '21 at 04:27

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>

score 0 · Answer 2 · answered Sep 05 '21 at 04:26

0

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.

answered Sep 05 '21 at 04:26

Rishabh Gupta

734
6
10

Chintu sharma · Answer 3 · 2021-09-05T11:07:46.253

Firstly your code has the two variables which should be inside the function
Secondly to access the value attribute of <input>
thirdly I got number as string so i converted form string to number using Number();

<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>

score 0 · Answer 4 · answered Sep 05 '21 at 05:22

You are almost correct at your end just need few updates...

<!--<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>-->

<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 = parseFloat(something.value) + parseFloat(somethingElse.value);
    document.getElementById("f").innerHTML = "Value Is: " + values
    }
    
</script>

You can use given code...which is not commented over here. That is because the statement

const something = document.getElementById("num")

will return an html element in document with the id that you have given in () rounded brackets so if you are making an calculator you can use this statement...

something.value

because it will return the string value which is stored inside the html element in document with the id that you have given in () rounded brackets....now the problem is that you want to add those right?

so just use the math function parseFloat like this...

var values = parseFloat(something.value) + parseFloat(somethingElse.value);

so that you can cast them to float ... you can use parseInt also but i suggest to use the above statement..Now you can make a calculator easily...

Isn't it right? :)

How would you do this in jQuery? Thank you very much for the answers by the way — RandomCodingWords, Sep 05 '21 at 18:50
Hey there, @RandomCodingWords thanks fro appreciate. I would like to answer your question ... that **How would you do this in jQuery?** ...It is that simple you just need to download library first, then set up all paths for javaScript and then...you need to use `const something = $("#num");` same as for input field "somethingElse" (i.e. replace "#num" with "#nume" in above line) the for adding you can use the same statement as mentioned above...now for showing result you must use... `$("#f").text("Value is : "+values);` I hope it will be helpful. — Henil Mistry, Sep 06 '21 at 14:56

Creating HTML Input based calculator

4 Answers4