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>