Button onclick event doesn't fire in javascript

Question

I don't know what is the problem in this code.

There are two input fields which are used for two variables to add, subtract, multiply and divide and 4 buttons (one each for add, subtract, multiply, and divide), but when I click on them nothing happens.

<h1>Calculator</h1>
<input id="f1" />
<input id="f2" />
<button id="add">Add</button>
<button id="sub">Sub</button>
<button id="multi">Multi</button>
<button id="div">Div</button>

var f1, f2, result;
document.getElementById("add").onclick=function{
    f1= document.getElementById("f1").value;
    f2= document.getElementById("f2").value;
    result = return f1+f2;
}
document.getElementById("sub").onclick=function{
    f1= document.getElementById("f1").value;
    f2= document.getElementById("f2").value;
    result = return f1-f2;
}
document.getElementById("multi").onclick=function{
    f1= document.getElementById("f1").value;
    f2= document.getElementById("f2").value;
    result = return f1*f2;
}
document.getElementById("div").onclick=function{
    f1= document.getElementById("f1").value;
    f2= document.getElementById("f2").value;
    result = return f1/f2;
}
if(result!=null)
alert("Result = "+result);

their is no method name you have given and not called on button click at all...then how do u expect to something happen on button click? — SHEKHAR SHETE
– SHEKHAR SHETE, Commented Oct 20, 2014 at 4:27
@SHEKHARSHETE it is not necessary to give method name, i have given id instead so function will be called when the button related to that ID is clicked... — user3510922
– user3510922, Commented Oct 21, 2014 at 5:39
YES I AGREE! :) your syntax of calling function is incorrect! function{} must be replaced with function(){} right... — SHEKHAR SHETE
– SHEKHAR SHETE, Commented Oct 21, 2014 at 5:42

dashtinejad · Accepted Answer · 2014-10-20 04:31:32Z

2

You have some mistakes and syntax errors:

The function need ():
```
onclick = function () {}
```
There is no need to use return in this case, just store the result into your variable:
```
result = f1+f2;
```
You should convert your textbox values into numbers:
```
f1 = document.getElementById("f1").value * 1;
```
You should show the result in each onclick, not at the end your script.

var f1, f2, result;
document.getElementById("add").onclick=function(){
	f1= document.getElementById("f1").value * 1;
	f2= document.getElementById("f2").value * 1;
	result =  f1+f2;
	alert("Result = "+result);
}
document.getElementById("sub").onclick=function(){
	f1= document.getElementById("f1").value * 1;
	f2= document.getElementById("f2").value * 1;
	result =  f1-f2;
	alert("Result = "+result);
}
document.getElementById("multi").onclick=function(){
	f1= document.getElementById("f1").value * 1;
	f2= document.getElementById("f2").value * 1;
	result =  f1*f2;
	alert("Result = "+result);
}
document.getElementById("div").onclick=function(){
	f1= document.getElementById("f1").value * 1;
	f2= document.getElementById("f2").value * 1;
	result =  f1/f2;
	alert("Result = "+result);
}

<h1>Calculator</h1>
<input id="f1" />
<input id="f2" />
<button id="add">Add</button>
<button id="sub">Sub</button>
<button id="multi">Multi</button>
<button id="div">Div</button>

answered Oct 20, 2014 at 4:31

dashtinejad

6,2734 gold badges32 silver badges46 bronze badges

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

1 Comment

SHEKHAR SHETE Over a year ago

hey @ROX! nice to see the "Run Code" feature... :)

Midhun Murali · Accepted Answer · 2014-10-20 04:30:57Z

0

Please find the working code below

var f1, f2, result;
document.getElementById("add").onclick=function(){

f1= document.getElementById("f1").value;
f2= document.getElementById("f2").value;
result = f1+f2;

if(result!=null)
alert("Result = "+result);
}

Inorde to assign the value to a variable there is no need to use return keyword . Also as you attaching click event for each button seperatly in each of them you need code to display the result. Hope you can find & correct the other function as above.

answered Oct 20, 2014 at 4:30

Midhun Murali

2,1518 gold badges29 silver badges50 bronze badges

Comments

Farrokh · Accepted Answer · 2014-10-20 04:33:12Z

you have some error in your code:
1- you are returning value but never use it.
2- your function definition need ()
3- yo should to convert input values to int
then this will work for you

var f1, f2, result;
document.getElementById("add").onclick=function(){
    f1= document.getElementById("f1").value;
    f2= document.getElementById("f2").value;
    result = parseInt(f1)+parseInt(f2);
    if(result!=null)
        alert("Result = "+result);
}
document.getElementById("sub").onclick=function(){
    f1= document.getElementById("f1").value;
    f2= document.getElementById("f2").value;
    result = parseInt(f1)-parseInt(f2);
    if(result!=null)
        alert("Result = "+result);
}
document.getElementById("multi").onclick=function(){
    f1= document.getElementById("f1").value;
    f2= document.getElementById("f2").value;
    result = parseInt(f1)*parseInt(f2);
    if(result!=null)
        alert("Result = "+result);
}
document.getElementById("div").onclick=function(){
    f1= document.getElementById("f1").value;
    f2= document.getElementById("f2").value;
    result = parseInt(f1)/parseInt(f2);
    if(result!=null)
        alert("Result = "+result);
}

Learning · Accepted Answer · 2014-10-20 04:36:39Z

<!doctype html>
<html>
<head>
<title>Javascript</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />  
</head>
<body>
<h1>Calculator</h1>
<input id="f1" />
<input id="f2" />
<button id="add">Add</button>
<button id="sub">Sub</button>
<button id="multi">Multi</button>
<button id="div">Div</button>
<script type="text/javascript">
var f1, f2, result;
document.getElementById("add").onclick = function () {
    f1 = parseFloat(document.getElementById("f1").value);
    f2 = parseFloat(document.getElementById("f2").value);
    result = f1 + f2;
    showResult();
}
document.getElementById("sub").onclick = function () {
    f1 = parseFloat(document.getElementById("f1").value);
    f2 = parseFloat(document.getElementById("f2").value);
    result = f1 - f2;
    showResult();
}
document.getElementById("multi").onclick = function () {
    f1 = parseFloat(document.getElementById("f1").value);
    f2 = parseFloat(document.getElementById("f2").value);
    result = f1 * f2;
    showResult();
}
document.getElementById("div").onclick = function () {
    f1 = parseFloat(document.getElementById("f1").value);
    f2 = parseFloat(document.getElementById("f2").value);
    result = f1 / f2;
    showResult();
}
function showResult() {
    alert("Result = " + result);
}
</script>
</body>
</html>

Collectives™ on Stack Overflow

Button onclick event doesn't fire in javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related