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: stackoverflow.com/questions/4380719/onclick-or-onclick — zero298
– zero298, Commented Mar 10, 2014 at 17:11

Geordee Naliyath · Accepted Answer · 2014-03-10 17:11:24Z

3

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

answered Mar 10, 2014 at 17:11

Geordee Naliyath

1,85921 silver badges29 bronze badges

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

3 Comments

Talen Kylon Over a year ago

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.

SLaks Over a year ago

Yes; add in the handler referred to the element.

Geordee Naliyath Over a year ago

Yeah. See this SO question too. stackoverflow.com/questions/15375845/…

invernomuto · Accepted Answer · 2014-03-10 17:09:20Z

0

onclick is the right attribute to handle click

answered Mar 10, 2014 at 17:09

invernomuto

10.2k5 gold badges42 silver badges54 bronze badges

Comments

Vitor M. Barbosa · Accepted Answer · 2014-03-10 17:09:42Z

0

onClick="add()"

Switch this bit to

onclick="add()"

answered Mar 10, 2014 at 17:09

Vitor M. Barbosa

3,6661 gold badge27 silver badges37 bronze badges

2 Comments

SLaks Over a year ago

No; HTML attributes are case-insensitive.

Talen Kylon Over a year ago

as @SLaks mentioned, changing the Click to lowercase did not solve the issue.

Antonio Romano · Accepted Answer · 2014-03-10 17:13:39Z

0

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

answered Mar 10, 2014 at 17:13

Antonio Romano

2853 silver badges13 bronze badges

Comments

Dissident Rage · Accepted Answer · 2014-03-10 17:14:53Z

0

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

answered Mar 10, 2014 at 17:14

Dissident Rage

2,7361 gold badge29 silver badges33 bronze badges

2 Comments

Squish Over a year ago

Performance articles tend to "suggest" you put as much of your JS at the bottom/footer in your doc.

Dissident Rage Over a year ago

Might as well start going back to document.write() while we're at it, because it's faster. Sorry, it's still bad form.

Collectives™ on Stack Overflow

Using javascript functions in HTML

5 Answers 5

3 Comments

Comments

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related