Using javascript functions in HTML

Question

I am creating a small webpage that will add two input fields together and place the result in another input field. This is what I have:

<html>
<head>
    <title>Calculator</title>

    <script type="text/javascript">
        function add(){
            var num1 = parseInt(document.calc.num1.value);
            var num2 = parseInt(document.calc.num2.value);
            var answer = (num1+num2);
            document.getElementById('res').value = answer;
        }
    </script>
</HEAD>

<BODY>
    <FORM NAME="calc">
        <INPUT TYPE ="button" NAME="add" Value="+" onClick="add()">
        <hr/>
        <INPUT TYPE ="text" NAME="num1" Value="">
        <INPUT TYPE ="text" NAME="num2" Value="">  
        <hr/>
        <INPUT TYPE ="text" ID="res" NAME="result" VALUE="">
    </FORM>
</BODY>
</HTML>

And I am getting the following error when I press the + button.

Uncaught TypeError: object is not a function

One thing I would suggest that MAY alleviate the problem is to pick a case, upper or lower, and stick with it. Most browsers prefer lower case for elements. Consider: http://stackoverflow.com/questions/4380719/onclick-or-onclick — zero298, Mar 10 '14 at 17:11

score 3 · Answer 1 · answered Mar 10 '14 at 17:11

3

Try changing the function name from add to addNumbers or something like that.

answered Mar 10 '14 at 17:11

Geordee Naliyath

1,799
17
28

Brilliant! I suppose the issue was because my function and button name were the same? Changing the function name to addNumbers solved the issue. Thank you. – Talen Kylon Mar 10 '14 at 17:12
Yes; `add` in the handler referred to the element. – SLaks Mar 10 '14 at 17:12
Yeah. See this SO question too. http://stackoverflow.com/questions/15375845/object-is-not-a-function-onclick-event – Geordee Naliyath Mar 10 '14 at 17:13

score 0 · Answer 2 · answered Mar 10 '14 at 17:09

0

onclick is the right attribute to handle click

answered Mar 10 '14 at 17:09

ale

10,012
5
40
49

score 0 · Answer 3 · answered Mar 10 '14 at 17:09

0

onClick="add()"

Switch this bit to

onclick="add()"

answered Mar 10 '14 at 17:09

Vitor M. Barbosa

3,286
1
24
36

2

No; HTML attributes are case-insensitive. – SLaks Mar 10 '14 at 17:10
as @SLaks mentioned, changing the Click to lowercase did not solve the issue. – Talen Kylon Mar 10 '14 at 17:10

score 0 · Answer 4 · answered Mar 10 '14 at 17:13

0

The problem is the name of the function "add()", change the name and you will see that it will works!

answered Mar 10 '14 at 17:13

Antonio Romano

285
3
13

score 0 · Answer 5 · answered Mar 10 '14 at 17:14

HTML

<p>
    <label for="field1">Field 1</label>
    <input type="number" id="field1"/>
</p>
<p>
    <label for="field2">Field 2</label>
    <input type="number" id="field2"/>
</p>
<p>
    <label for="total">Total</label>
    <input readonly type="number" id="total"/>
</p>
<p>
    <input type="button" id="calc" value="Calculate"/>
</p>

Javascript Goes in a script tag in head.

function sumFields(fields) {
    var total = 0;

    // goes through each field and adds them to the total
    for(var i=0,l=fields.length; i<l; i++)
        { total += parseInt(document.getElementById(fields[i]).value); }

    document.getElementById('total').value = total;
}

function calc_click() {
    // runs when the button is clicked
    sumFields(['field1','field2']);
}

// main function
function init() {
    // add button functionality
    document.getElementById('calc').addEventListener('click',calc_click,false);
}

// fires when the DOM is loaded
document.addEventListener('DOMContentLoaded',init,false);

Performance articles tend to "suggest" you put as much of your JS at the bottom/footer in your doc. — Squish, Mar 10 '14 at 18:35
Might as well start going back to `document.write()` while we're at it, because it's faster. Sorry, it's *still bad form*. — Dissident Rage, Mar 10 '14 at 18:49

Using javascript functions in HTML

5 Answers5