简单的HTML和JavaScript计算器

-1

我必须用HTML编写计算器。我真的无法找到问题所在，也没有显示结果。我找不到什么错，你能帮忙吗？我在Chrome中运行它。简单的HTML和JavaScript计算器

的JavaScript文件和与HTML：

showresult(choise){ 
 
var n1=parsefloat(document.getElementById('num1').value); 
 
var n2=parsefloat(document.getElementById('num2').value); 
 
var r; 
 
var c=choise; 
 

 
switch(c) 
 
\t { 
 
\t case '1': 
 
\t \t r=n1+n2; 
 
\t \t break; 
 
\t case '2': 
 
\t \t r=n1-n2; 
 
\t \t break; 
 
\t case '3': 
 
\t \t r=n1*n2; 
 
\t \t break; 
 
\t case '4': 
 
\t \t r=n1/n2; 
 
\t \t break; 
 
\t case '5': 
 
\t \t r=n2*100/n1; 
 
\t \t break; 
 
\t default: 
 
\t \t break; 
 
\t \t \t 
 
\t } 
 
document.getElementById('result').innerHTML=r; 
 

 
\t 
 

 
}

<!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>

来源

2014-11-24 valentinosael

简单的计算器？ – 2014-11-24 18:17:19

html和javascript文件 – valentinosael 2014-11-24 18:18:41

事情来解决：指的是一个input元素时 1）分配给value，不innerHTML。（他们没有内容，因此没有innerHTML。 2）用关键字function开始函数声明。 3）它是parseFloat，而不是parsefloat。 JavaScript区分大小写。

微创固定码：

function showresult(choise){ 
 
var n1=parseFloat(document.getElementById('num1').value); 
 
var n2=parseFloat(document.getElementById('num2').value); 
 
var r; 
 
var c=choise; 
 

 
switch(c) 
 
\t { 
 
\t case '1': 
 
\t \t r=n1+n2; 
 
\t \t break; 
 
\t case '2': 
 
\t \t r=n1-n2; 
 
\t \t break; 
 
\t case '3': 
 
\t \t r=n1*n2; 
 
\t \t break; 
 
\t case '4': 
 
\t \t r=n1/n2; 
 
\t \t break; 
 
\t case '5': 
 
\t \t r=n2*100/n1; 
 
\t \t break; 
 
\t default: 
 
\t \t break; 
 
\t \t \t 
 
\t } 
 
document.getElementById('result').value=r; 
 

 
\t 
 

 
}

<!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>

来源

2014-11-24 18:19:16

打败我吧......但这里有一个可以显示它的plnkr。 http://plnkr.co/edit/UT0FhVjbEZu5iv1J1ZVj?p=preview – Timothy 2014-11-24 18:20:13

非常感谢，工作！ – valentinosael 2014-11-24 18:32:35

确保正确声明函数。

function showresult(choise) { 
/* ... */ 
}

此外，请记住的Javascript是区分因此敏感解析的浮子以正确的方式是 parseFloat() 最后，如由gillesc指出的那样，使用属性value输入元件上。 document.getElementById('result').value=r;

来源

2014-11-24 18:21:39

就应该更换 “innerHTML的”到“值”在你的代码。

如果你想一个非输入HTML元素中获取文本，然后你将不得不使用，而不是价值

innerHTML属性现在的代码变成：

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

这里我们使用了所有输入元素必须使用的值属性来获取用户输入的值。

来源

2014-11-24 18:49:52 LittleGirl

你可以在你的代码中使用此的 “HTML” 或JS

function calc(form) { 
     var D = "0"; 
     var A = document.getElementById("num1").value; 
     var B = document.getElementById("op").value; 
     var C = document.getElementById("num2").value; 

     switch(B){ 
      case'+': 
      D= parseInt(A)+parseInt(C); break; 
      case'-': 
      D= parseInt(A)-parseInt(C); break; 
      case'*': 
      D=parseInt(A)*parseInt(C); break; 
      case'/': 
      D=parseInt(A)/parseInt(C); break; 
     } 
}

来源

2017-07-21 05:36:34

简单的HTML和JavaScript计算器

回答

相关问题