Question

23

Simple calculator in HTML and JavaScript

rated 0 times [ 27] [ 4] / answers: 1 / hits: 46537 / 10 Years ago, mon, november 24, 2014, 12:00:00

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:

showresult(choise){

var n1=parsefloat(document.getElementById('num1').value);

var n2=parsefloat(document.getElementById('num2').value);

var r;

var c=choise;



switch(c)

	{

	case '1':

		r=n1+n2;

		break;

	case '2':

		r=n1-n2;

		break;

	case '3':

		r=n1*n2;

		break;

	case '4': 

		r=n1/n2;

		break;

	case '5':

		r=n2*100/n1;

		break;

	default:

		break;

			

	}

document.getElementById('result').innerHTML=r;



	



}

<!DOCTYPE html>

<html>

<head>

<title>Calculator</title>

<script src=calculator.js type=text/javascript></script>

</head>

<body>





<h1>My calculator</h1>

<table border=1 cellpadding=5 cellspacing=5 width=600>

<tr align=center>

<td>First number</td>

<td>Second Number</td>

<td>Result</td>

</tr>

<tr align=center>

<td><input name=number1 type=text size=10 id='num1'/></td>

<td><input name=number2 type=text size=10 id='num2'/></td>

<td> <input type=text id='result' readonly ></td>

</tr>

<tr>

<td colspan=3>

<button onclick=showresult('1')>+</button>

<button onclick=showresult('2')>-</button>

<button onclick=showresult('3')>*</button>

<button onclick=showresult('4')>/</button>

<button onclick=showresult('5')>%</button>

</td>

</tr>



</table>

</body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bobbie

Add To Favorites

Follow

Total Points: 262

Total Questions: 91

Total Answers: 102

Location: Bermuda

Member since Mon, Dec 5, 2022

2 Years ago

answered 10 Years ago kaitlyn · Accepted 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:

function showresult(choise){

var n1=parseFloat(document.getElementById('num1').value);

var n2=parseFloat(document.getElementById('num2').value);

var r;

var c=choise;



switch(c)

	{

	case '1':

		r=n1+n2;

		break;

	case '2':

		r=n1-n2;

		break;

	case '3':

		r=n1*n2;

		break;

	case '4': 

		r=n1/n2;

		break;

	case '5':

		r=n2*100/n1;

		break;

	default:

		break;

			

	}

document.getElementById('result').value=r;



	



}

<!DOCTYPE html>

<html>

<head>

<title>Calculator</title>

<script src=calculator.js type=text/javascript></script>

</head>

<body>





<h1>My calculator</h1>

<table border=1 cellpadding=5 cellspacing=5 width=600>

<tr align=center>

<td>First number</td>

<td>Second Number</td>

<td>Result</td>

</tr>

<tr align=center>

<td><input name=number1 type=text size=10 id='num1'/></td>

<td><input name=number2 type=text size=10 id='num2'/></td>

<td> <input type=text id='result' readonly ></td>

</tr>

<tr>

<td colspan=3>

<button onclick=showresult('1')>+</button>

<button onclick=showresult('2')>-</button>

<button onclick=showresult('3')>*</button>

<button onclick=showresult('4')>/</button>

<button onclick=showresult('5')>%</button>

</td>

</tr>



</table>

</body>

</html>