HTML 和 JavaScript 中的简单计算器 [英] Simple calculator in HTML and JavaScript
问题描述
我必须用 HTML 编写一个计算器.我真的找不到出了什么问题，它没有显示结果.我找不到问题，你能帮忙吗?我在 Chrome 中运行它.
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 文件和 HTML:
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>推荐答案
需要解决的问题:1) 当引用 input 元素时，分配给 value，而不是 innerHTML.(它们没有内容，因此没有 innerHTML.2) 以关键字function 开始函数声明.3)它是parseFloat，而不是parsefloat.JavaScript 区分大小写.
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.
最小固定代码:
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>这篇关于HTML 和 JavaScript 中的简单计算器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
