simple calculation in javascript/ reference error not defined

up vote
1
down vote

favorite

I am absolutely new to javascript. I am trying to create my first html page and add some javascript on my html tags. I want to have two boxes where I can input any number and click on Show me! in order to get the result. I wrote the code below but is doesn't do anything:

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var a = parseFloat(document.getElementById("a").value);

            var b = parseFloat(document.getElementById("b").value);

            document.getElementById("result") == a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

Any help with where I am wrong?
Many thanks in advance!

asked 20 hours ago

Ioana

112

add a comment |

up vote
1
down vote

favorite

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var a = parseFloat(document.getElementById("a").value);

            var b = parseFloat(document.getElementById("b").value);

            document.getElementById("result") == a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

Any help with where I am wrong?
Many thanks in advance!

asked 20 hours ago

Ioana

112

add a comment |

up vote
1
down vote

favorite

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var a = parseFloat(document.getElementById("a").value);

            var b = parseFloat(document.getElementById("b").value);

            document.getElementById("result") == a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

Any help with where I am wrong?
Many thanks in advance!

asked 20 hours ago

Ioana

112

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var a = parseFloat(document.getElementById("a").value);

            var b = parseFloat(document.getElementById("b").value);

            document.getElementById("result") == a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

Any help with where I am wrong?
Many thanks in advance!

javascript function

asked 20 hours ago

Ioana

112

asked 20 hours ago

Ioana

112

asked 20 hours ago

Ioana

112

asked 20 hours ago

Ioana

112

asked 20 hours ago

Ioana

112

add a comment |

2 Answers
2

active

oldest

votes

up vote
2
down vote

You have to use the value property of the element. Please notice the changes in the operator used, it should be assignment (=) not compariosn (==).

document.getElementById("result").value = a+b;

I will also suggest you to assign 0 when there is no value in the element. This will prevent showing unexpected NaN as result if any of the element's value is empty.

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var val1 = document.getElementById("a").value.trim();

            var val2 = document.getElementById("b").value.trim();

            var a = parseFloat(val1 == ""? 0 : val1);

            var b = parseFloat(val2 == ""? 0 : val2);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

edited 20 hours ago

answered 20 hours ago

Mamun

21.4k71428

Thanks! I did, but then I get: Uncaught ReferenceError: Invalid left-hand side in assignment. Do you know why?
– Ioana
20 hours ago

1

@Ioana You shouldn't get that error if you added .value and changed == to =
– Nick Parsons
20 hours ago

Yes. I forgot about .value. Now it works. Thank you!
– Ioana
20 hours ago

@Ioana, you are most welcome :)
– Mamun
20 hours ago

add a comment |

up vote
0
down vote

Well, it seems you merely forgot a little thing.

When reading the values of the a and b text boxes, you correctly used .value after retrieving the elements to access their value, but when you tried to set the value of result text box, you instead just compared it to the value of a+b. The == operator is for comparison, not setting a value.

Just as well, you will need to set the .value of the result text box, instead of the text box itself.

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var a = parseFloat(document.getElementById("a").value);

            var b = parseFloat(document.getElementById("b").value);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

answered 20 hours ago

Stav Saad

541413

thanks so much! I forgot add .value to result, yes. Now it works!
– Ioana
20 hours ago

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237428%2fsimple-calculation-in-javascript-reference-error-not-defined%23new-answer', 'question_page');
}
);

Post as a guest

Name

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
2
down vote

You have to use the value property of the element. Please notice the changes in the operator used, it should be assignment (=) not compariosn (==).

document.getElementById("result").value = a+b;

I will also suggest you to assign 0 when there is no value in the element. This will prevent showing unexpected NaN as result if any of the element's value is empty.

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var val1 = document.getElementById("a").value.trim();

            var val2 = document.getElementById("b").value.trim();

            var a = parseFloat(val1 == ""? 0 : val1);

            var b = parseFloat(val2 == ""? 0 : val2);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

edited 20 hours ago

answered 20 hours ago

Mamun

21.4k71428

Thanks! I did, but then I get: Uncaught ReferenceError: Invalid left-hand side in assignment. Do you know why?
– Ioana
20 hours ago

1

@Ioana You shouldn't get that error if you added .value and changed == to =
– Nick Parsons
20 hours ago

Yes. I forgot about .value. Now it works. Thank you!
– Ioana
20 hours ago

@Ioana, you are most welcome :)
– Mamun
20 hours ago

add a comment |

up vote
2
down vote

You have to use the value property of the element. Please notice the changes in the operator used, it should be assignment (=) not compariosn (==).

document.getElementById("result").value = a+b;

I will also suggest you to assign 0 when there is no value in the element. This will prevent showing unexpected NaN as result if any of the element's value is empty.

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var val1 = document.getElementById("a").value.trim();

            var val2 = document.getElementById("b").value.trim();

            var a = parseFloat(val1 == ""? 0 : val1);

            var b = parseFloat(val2 == ""? 0 : val2);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

edited 20 hours ago

answered 20 hours ago

Mamun

21.4k71428

Thanks! I did, but then I get: Uncaught ReferenceError: Invalid left-hand side in assignment. Do you know why?
– Ioana
20 hours ago

1

@Ioana You shouldn't get that error if you added .value and changed == to =
– Nick Parsons
20 hours ago

Yes. I forgot about .value. Now it works. Thank you!
– Ioana
20 hours ago

@Ioana, you are most welcome :)
– Mamun
20 hours ago

add a comment |

up vote
2
down vote

You have to use the value property of the element. Please notice the changes in the operator used, it should be assignment (=) not compariosn (==).

document.getElementById("result").value = a+b;

I will also suggest you to assign 0 when there is no value in the element. This will prevent showing unexpected NaN as result if any of the element's value is empty.

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var val1 = document.getElementById("a").value.trim();

            var val2 = document.getElementById("b").value.trim();

            var a = parseFloat(val1 == ""? 0 : val1);

            var b = parseFloat(val2 == ""? 0 : val2);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

edited 20 hours ago

answered 20 hours ago

Mamun

21.4k71428

You have to use the value property of the element. Please notice the changes in the operator used, it should be assignment (=) not compariosn (==).

document.getElementById("result").value = a+b;

I will also suggest you to assign 0 when there is no value in the element. This will prevent showing unexpected NaN as result if any of the element's value is empty.

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var val1 = document.getElementById("a").value.trim();

            var val2 = document.getElementById("b").value.trim();

            var a = parseFloat(val1 == ""? 0 : val1);

            var b = parseFloat(val2 == ""? 0 : val2);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var val1 = document.getElementById("a").value.trim();

            var val2 = document.getElementById("b").value.trim();

            var a = parseFloat(val1 == ""? 0 : val1);

            var b = parseFloat(val2 == ""? 0 : val2);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var val1 = document.getElementById("a").value.trim();

            var val2 = document.getElementById("b").value.trim();

            var a = parseFloat(val1 == ""? 0 : val1);

            var b = parseFloat(val2 == ""? 0 : val2);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

edited 20 hours ago

answered 20 hours ago

Mamun

21.4k71428

edited 20 hours ago

answered 20 hours ago

Mamun

21.4k71428

answered 20 hours ago

Mamun

21.4k71428

answered 20 hours ago

Mamun

21.4k71428

Thanks! I did, but then I get: Uncaught ReferenceError: Invalid left-hand side in assignment. Do you know why?
– Ioana
20 hours ago

1

@Ioana You shouldn't get that error if you added .value and changed == to =
– Nick Parsons
20 hours ago

Yes. I forgot about .value. Now it works. Thank you!
– Ioana
20 hours ago

@Ioana, you are most welcome :)
– Mamun
20 hours ago

add a comment |

Thanks! I did, but then I get: Uncaught ReferenceError: Invalid left-hand side in assignment. Do you know why?
– Ioana
20 hours ago

1

@Ioana You shouldn't get that error if you added .value and changed == to =
– Nick Parsons
20 hours ago

Yes. I forgot about .value. Now it works. Thank you!
– Ioana
20 hours ago

@Ioana, you are most welcome :)
– Mamun
20 hours ago

Thanks! I did, but then I get: Uncaught ReferenceError: Invalid left-hand side in assignment. Do you know why?
– Ioana
20 hours ago

@Ioana You shouldn't get that error if you added .value and changed == to =
– Nick Parsons
20 hours ago

Yes. I forgot about .value. Now it works. Thank you!
– Ioana
20 hours ago

@Ioana, you are most welcome :)
– Mamun
20 hours ago

add a comment |

up vote
0
down vote

Well, it seems you merely forgot a little thing.

Just as well, you will need to set the .value of the result text box, instead of the text box itself.

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var a = parseFloat(document.getElementById("a").value);

            var b = parseFloat(document.getElementById("b").value);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

answered 20 hours ago

Stav Saad

541413

thanks so much! I forgot add .value to result, yes. Now it works!
– Ioana
20 hours ago

add a comment |

up vote
0
down vote

Well, it seems you merely forgot a little thing.

Just as well, you will need to set the .value of the result text box, instead of the text box itself.

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var a = parseFloat(document.getElementById("a").value);

            var b = parseFloat(document.getElementById("b").value);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

answered 20 hours ago

Stav Saad

541413

thanks so much! I forgot add .value to result, yes. Now it works!
– Ioana
20 hours ago

add a comment |

up vote
0
down vote

Well, it seems you merely forgot a little thing.

Just as well, you will need to set the .value of the result text box, instead of the text box itself.

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var a = parseFloat(document.getElementById("a").value);

            var b = parseFloat(document.getElementById("b").value);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

answered 20 hours ago

Stav Saad

541413

Well, it seems you merely forgot a little thing.

Just as well, you will need to set the .value of the result text box, instead of the text box itself.

<!DOCTYPE html>

<html>

<head>

    <title>Interactive JS homework</title>

    <style>

    </style>

    <script>

        function calculate(){

            var a = parseFloat(document.getElementById("a").value);

            var b = parseFloat(document.getElementById("b").value);

            document.getElementById("result").value = a+b;

        }

    </script>

</head>

<body>

    <form>

        <p>

            <input type="text" id="a" oninput="calculate();">

            <input type="text" id="b" oninput="calculate();">

            <input type="button" id="showme" value="Show me!" onclick="calculate();">

            <input type="text" id="result">

        </p>

    </form>

</body>

answered 20 hours ago

Stav Saad

541413

answered 20 hours ago

Stav Saad

541413

answered 20 hours ago

Stav Saad

541413

answered 20 hours ago

Stav Saad

541413

thanks so much! I forgot add .value to result, yes. Now it works!
– Ioana
20 hours ago

add a comment |

thanks so much! I forgot add .value to result, yes. Now it works!
– Ioana
20 hours ago

thanks so much! I forgot add .value to result, yes. Now it works!
– Ioana
20 hours ago

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu