文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >HTML和JavaScript中的简单计算器

问HTML和JavaScript中的简单计算器
EN

Stack Overflow用户
提问于 2014-11-25 02:08:07
回答 7查看 41.3K关注 0票数 1

我必须用HTML写一个计算器。我真的找不到哪里出了问题，也没有显示结果。我找不到什么不对劲的地方你能帮我吗？我在Chrome上运行它。

JavaScript文件和：

​

代码语言：javascript
复制
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;

	

}
代码语言：javascript
复制
<!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>

​

javascript
html
EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2014-11-25 02:19:17

需要修正的事情: 1)当引用一个input元素时，赋值给value，而不是innerHTML。(它们没有内容，因此没有innerHTML。2)以关键字function开始函数声明。3)是parseFloat，不是parsefloat。JavaScript区分大小写。

最小固定代码：

​

代码语言：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)
	{
	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;

	

}
代码语言：javascript
复制
<!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>

​

票数 6
EN

Stack Overflow用户

发布于 2021-11-13 11:18:55

您正在设置输入的innerHTML属性，如果您想在输入中显示文本/数据，这将不起作用，因为输入具有value属性。

您应该更改此行：

代码语言：javascript
复制
document.getElementById('result').innerHTML=r;

至：

代码语言：javascript
复制
document.getElementById('result').value = r;

关于用简单的javascript创建计算器，也可以查看我编写的这个教程，它可能会对您有所帮助：Create a calulator in javascript - Tutorial by 10code.dev

票数 2
EN

Stack Overflow用户

发布于 2019-12-03 20:33:43

​

代码语言：javascript
复制
var cnum = document.getElementsByClassName('c-num')[0];
var cope = document.getElementsByClassName('c-operator')[0];
var intom = document.getElementById('intop');
var inbottom = document.getElementById('inbottom');
var newinbottom;
var newinbottom2;
var sign;
for(i=0;i<10;i++){
	cnum.innerHTML +='<span class="numb" value="'+i+'" id="numid'+i+'" onclick="puton('+i+')">'+i+'</span>';
}
document.getElementById('numid0').style.order = "1";
function puton(numb){
		inbottom.value += numb	
}
function ans(answer){
	//console.log(sign)
		if(inbottom.value ==''){
		   alert('type input');
		   }else if(sign == "plus"){
		newinbottom2 = inbottom.value;
		intom.value = inbottom.value;
			inbottom.value = parseInt(newinbottom) + parseInt(newinbottom2);   
	}else if(sign == "minus"){
			 newinbottom2 = inbottom.value;
		intom.value = inbottom.value;
			inbottom.value = newinbottom - newinbottom2;
			 }else if(sign == "divi"){
				newinbottom2 = inbottom.value;
		intom.value = inbottom.value;
			inbottom.value = newinbottom / newinbottom2;
			 }else if(sign == "mul"){
				newinbottom2 = inbottom.value;
		intom.value = inbottom.value;
			inbottom.value = newinbottom * newinbottom2;
			 }
			
			sign ='';
	
}
function opr(opra){
	if(sign != '' && sign != undefined){
		ans();
	}
	else if(opra == "clr"){
			 	intom.value =''
			 	inbottom.value ='';
				newinbottom='';
				newinbottom='';
			 	sign ='';
			 }
	else if(opra == "plus"){
	newinbottom = inbottom.value;
	intom.value = inbottom.value;
	inbottom.value = '';
		sign = "plus";
	}else if(opra == "minus"){
	newinbottom = inbottom.value;
	intom.value = inbottom.value;
	inbottom.value = '';
			 sign = "minus";
			 }else if(opra == "divi"){
	 newinbottom = inbottom.value;
	intom.value = inbottom.value;
	inbottom.value = '';
				sign = "divi";
			 }else if(opra == "mul"){
 	newinbottom = inbottom.value;
	intom.value = inbottom.value;
	inbottom.value = '';
				sign = "mul";
			 }
}
代码语言：javascript
复制
.main{
	width:100vw;
	height: 100vh;
	display: flex;
    justify-content: center;
	}
	.c-body {
    width: 400px;
    height: 255px;
    background: #ccc;
    border: 1px solid;
	}
	.c-num{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.c-operator{
		flex-shrink: 1;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
	.c-row{
		display: flex;
  		flex-flow: row;
	}
	.c-operator [id^='numid']{
	width: 90px;
	flex-direction: initial;
	}
	[id^='numid'] {
    display: flex;
    flex-shrink: 1;
    background: #fff;
    padding: 4px;
    margin: 4px;
    width: 80px;
    justify-content: center;
    cursor: pointer;
	flex-direction: inherit;
}
	.c-minputs .inbox{
		display: block;
		width: 100%;
	}
	[id^='numid']:hover{
		background: #f5f5f5;
	}
代码语言：javascript
复制
<div class="main">
		<div class="c-body">
			<div class="c-minputs">
				<input id="intop" type="number" class="topin inbox" disabled>
			<input id="inbottom" type="number" class="bottomin inbox" placeholder="Type Here">
	</div>
	<div class="c-row">
	<div class="c-num">
			
			</div>
			<div class="c-operator">
		<span class="numb" id="numidplus" onclick="opr('plus')">+</span>
		<span class="numb" id="numidminus" onclick="opr('minus')">-</span>
		<span class="numb" id="numiddiv" onclick="opr('divi')">/</span>
		<span class="numb" id="numidmul" onclick="opr('mul')">*</span>
		<span class="numb" id="numidans" onclick="ans('answer')">=</span>
		<span class="numb" id="numidclr" onclick="opr('clr')">c</span>
		</div>
	</div>
		</div>
	</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/27111342

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档