Make Javascript calculate HTML input from user

Question

I want to make a website that can calculate the numbers that the user enters in the text field. Below, I am trying to store the users input in a variable and then return it to the console, but this does not seem to work. It is supposed to take in more calculations down the line, but I thought I would keep it simple at first. What have i forgotten?

PS: I'm currently still learning JavaScript, so don't roast me too hard :)

Thanks!

Best Mikkel

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="/JavaScript/culjo.js" defer></script>
        <title>Culjo</title>
    </head>
    <body>
    <h1>Culjo</h1>

    <input id="inputOne" type="text">
    <input id="inputtwo" type="text">
    <input id="result" type="number">





    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256- 
    QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
        <script 
    src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </body>
    </html>

Javascript

        function calculate() {
        var inputOne = document.getElementById("inputOne")
        var inputTwo = document.getElementById("inputTwo")
            result = inputOne+inputTwo + inputTwo
            
            return result
    }
    calculate()

I imagine you have forgotten to turn the string inputs into numbers. But please detail specifically what is not working. — DBS
– DBS, Commented Aug 17, 2020 at 12:41
you probably need to parseInt() or parseFloat() the text box values otherwise they will be strings and will just concatenate instead of add — Pete
– Pete, Commented Aug 17, 2020 at 12:41
also you missed off the .value (to get the value entered in the textbox) - eg inputOne.value. And finally, you don't do anything with the result — Pete
– Pete, Commented Aug 17, 2020 at 12:47

panbak · Accepted Answer · 2020-08-17 12:48:52Z

1

You need to get the value of the field like this:

var inputOne = document.getElementById("inputOne").value;

and then use

parseInt() or parseFloat() as stated at the comments to parse the string.

answered Aug 17, 2020 at 12:48

panbak

4163 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ray Andison Over a year ago

var result = parseInt(inputOne) + parseInt(inputTwo); or var result = parseFloat(inputOne) + parseFloat(inputTwo); as reference because you mentioned you were still learning, goodluck ;)

Guffas Over a year ago

Thank you very much, all of you! I will get back to you as soon as I know if it works! :)

Guffas Over a year ago

It worked like a charm! I actually found another solution: In stead of using parseInt, you can just put in "+" instead and that does the same like so: var result = +inputOne + +inputTwo It works with floating point numbers as well.

Collectives™ on Stack Overflow

Make Javascript calculate HTML input from user

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related