I have to write a calculator in HTML. I really can’t find what is going wrong and it does not show the results. I can’t find something wrong can you help? I’m running it in Chrome.
JavaScript File and and the HTML:
JavaScript
x
32
32
1
showresult(choise){
2
var n1=parsefloat(document.getElementById('num1').value);
3
var n2=parsefloat(document.getElementById('num2').value);
4
var r;
5
var c=choise;
6
7
switch(c)
8
{
9
case '1':
10
r=n1+n2;
11
break;
12
case '2':
13
r=n1-n2;
14
break;
15
case '3':
16
r=n1*n2;
17
break;
18
case '4':
19
r=n1/n2;
20
break;
21
case '5':
22
r=n2*100/n1;
23
break;
24
default:
25
break;
26
27
}
28
document.getElementById('result').innerHTML=r;
29
30
31
32
}
JavaScript
1
34
34
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>Calculator</title>
5
<script src="calculator.js" type="text/javascript"></script>
6
</head>
7
<body>
8
9
10
<h1>My calculator</h1>
11
<table border="1" cellpadding="5" cellspacing="5" width="600">
12
<tr align="center">
13
<td>First number</td>
14
<td>Second Number</td>
15
<td>Result</td>
16
</tr>
17
<tr align="center">
18
<td><input name="number1" type="text" size=10 id='num1'/></td>
19
<td><input name="number2" type="text" size=10 id='num2'/></td>
20
<td> <input type="text" id='result' readonly ></td>
21
</tr>
22
<tr>
23
<td colspan="3">
24
<button onclick="showresult('1')">+</button>
25
<button onclick="showresult('2')">-</button>
26
<button onclick="showresult('3')">*</button>
27
<button onclick="showresult('4')">/</button>
28
<button onclick="showresult('5')">%</button>
29
</td>
30
</tr>
31
32
</table>
33
</body>
34
</html>
Advertisement
Answer
Things to fix:
1) Assign to value
, not innerHTML
, when referring to an input
element. (They have no content, hence no innerHTML
.
2) Start a function declaration with the keyword function
.
3) It’s parseFloat
, not parsefloat
. JavaScript is case-sensitive.
Minimally fixed code:
JavaScript
1
32
32
1
function showresult(choise){
2
var n1=parseFloat(document.getElementById('num1').value);
3
var n2=parseFloat(document.getElementById('num2').value);
4
var r;
5
var c=choise;
6
7
switch(c)
8
{
9
case '1':
10
r=n1+n2;
11
break;
12
case '2':
13
r=n1-n2;
14
break;
15
case '3':
16
r=n1*n2;
17
break;
18
case '4':
19
r=n1/n2;
20
break;
21
case '5':
22
r=n2*100/n1;
23
break;
24
default:
25
break;
26
27
}
28
document.getElementById('result').value=r;
29
30
31
32
}
JavaScript
1
34
34
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>Calculator</title>
5
<script src="calculator.js" type="text/javascript"></script>
6
</head>
7
<body>
8
9
10
<h1>My calculator</h1>
11
<table border="1" cellpadding="5" cellspacing="5" width="600">
12
<tr align="center">
13
<td>First number</td>
14
<td>Second Number</td>
15
<td>Result</td>
16
</tr>
17
<tr align="center">
18
<td><input name="number1" type="text" size=10 id='num1'/></td>
19
<td><input name="number2" type="text" size=10 id='num2'/></td>
20
<td> <input type="text" id='result' readonly ></td>
21
</tr>
22
<tr>
23
<td colspan="3">
24
<button onclick="showresult('1')">+</button>
25
<button onclick="showresult('2')">-</button>
26
<button onclick="showresult('3')">*</button>
27
<button onclick="showresult('4')">/</button>
28
<button onclick="showresult('5')">%</button>
29
</td>
30
</tr>
31
32
</table>
33
</body>
34
</html>