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
asked Mar 10, 2014 at 17:01
Talen Kylon
1,9887 gold badges36 silver badges64 bronze badges
-
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-onclickzero298– zero2982014年03月10日 17:11:27 +00:00Commented Mar 10, 2014 at 17:11
5 Answers 5
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 badges30 bronze badges
Sign up to request clarification or add additional context in comments.
3 Comments
Talen Kylon
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
Yes;
add in the handler referred to the element.Geordee Naliyath
Yeah. See this SO question too. stackoverflow.com/questions/15375845/…
onclick is the right attribute to handle click
answered Mar 10, 2014 at 17:09
invernomuto
10.3k5 gold badges43 silver badges54 bronze badges
Comments
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
No; HTML attributes are case-insensitive.
Talen Kylon
as @SLaks mentioned, changing the Click to lowercase did not solve the issue.
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
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,7461 gold badge29 silver badges33 bronze badges
2 Comments
Squish
Performance articles tend to "suggest" you put as much of your JS at the bottom/footer in your doc.
Dissident Rage
Might as well start going back to
document.write() while we're at it, because it's faster. Sorry, it's still bad form.lang-js