我必须用HTML写一个计算器。我真的找不到哪里出了问题,也没有显示结果。我找不到什么不对劲的地方你能帮我吗?我在Chrome上运行它。
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;
}
<!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-25 02:19:17
需要修正的事情: 1)当引用一个input
元素时,赋值给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)
{
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>
发布于 2021-11-13 11:18:55
您正在设置输入的innerHTML
属性,如果您想在输入中显示文本/数据,这将不起作用,因为输入具有value
属性。
您应该更改此行:
document.getElementById('result').innerHTML=r;
至:
document.getElementById('result').value = r;
关于用简单的javascript创建计算器,也可以查看我编写的这个教程,它可能会对您有所帮助:Create a calulator in javascript - Tutorial by 10code.dev
发布于 2019-12-03 20:33:43
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";
}
}
.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;
}
<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>
https://stackoverflow.com/questions/27111342
复制相似问题