我的HTML计算器不会显示输入或结果。如果可能的话，我想保留我的布局和设计。我只用HTML代码制作了这个计算器。我希望它成为一个先前存在的网站的基础。我已经尝试过使用JavaScript和jQuery，但是我也不太了解它以使它运行。我也尝试了一些调试软件，但他们还没有缩小问题范围。
HTML计算器代码：
body {
background-color: #FFFFFF;
background-size: 1500px;
}
#calculator {
width: 250px;
height: 375px;
text-align: center;
margin: 90px auto;
box-shadow: 10px 10px 10px #010012;
background-color: #229EE2;
background-size: 7px;
border-radius: 30px;
border: 3px solid #595959;
}
#display {
margin: 30px 0 20px 0;
padding-right: 2%;
width: 220px;
height: 30px;
border-radius: 4px;
box-shadow: 0px 0px 3px #595959;
text-align: right;
font: 27px bold;
color: #1A3C67;
background-color: #78c4ed;
}
#keys {
width: 43px;
height: 35px;
margin-left: 10px;
margin-bottom: 20px;
box-shadow: 0px 0px 15px #010012;
cursor: pointer;
font-style: italic;
color: lightblue;
background-color: rgb(0, 50, 68);
font-weight: bold;
font-size: 24px;
border-radius: 4px;
}
#keys:hover {
background: #1998cd;
font-weight: bold;
color: #1e185e;
}
#keysC {
width: 43px;
height: 35px;
margin-left: 10px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px #595959;
cursor: pointer;
font-style: italic;
color: #1A3C67;
background-color: lightblue;
font-weight: bold;
font-size: 16px;
border-radius: 4px;
}
#keysC:hover {
background: #7caad0;
font-weight: bold;
color: #1A3C67;
}<html>
<head>
<title>Financial Calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="calculator">
<div class="fluid-container">
<form name="Financial Calculator">
<input type="textfield" id="display" name="ans" value="" class="form-control" placeholder="">
<br>
<div class="row">
<div>
<input type="reset" id="keysC" value="C">
<input type="reset" id="keysC" value="CE">
<input type="button" id="keysC" value="<--">
<input type="button" id="keysC" value="%" onClick="document.calculator.ans.value+='%'">
</div>
</div>
<br>
<input type="button" id="keys" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" id="keys" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" id="keys" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" id="keysC" value="/" onClick="document.calculator.ans.value+='/'">
<br>
<input type="button" id="keys" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" id="keys" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" id="keys" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" id="keysC" value="*" onClick="document.calculator.ans.value+='*'">
<br>
<input type="button" id="keys" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" id="keys" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" id="keys" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" id="keysC" value="-" onClick="document.calculator.ans.value+='-'">
<br>
<input type="button" id="keys" value="0" onClick="document.calculator.ans.value+='0'">
<input type="button" id="keys" value="." onClick="document.calculator.ans.value+='.'">
<input type="button" id="keys" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<input type="button" id="keysC" value="+" onClick="document.calculator.ans.value+='+'">
</form>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
首先，您写了onClick，但实际上是onclick，因为它是区分大小写的。
第二，您写了document.calculator.ans.value，不起作用。相反，您只需要ans.value就可以了。
下面我为您的计算器添加了HTML代码，以显示您想要的内容（有效）
body {
background-color: #FFFFFF;
background-size: 1500px;
}
#calculator {
width: 250px;
height: 375px;
text-align: center;
margin: 90px auto;
box-shadow: 10px 10px 10px #010012;
background-color: #229EE2;
background-size: 7px;
border-radius: 30px;
border: 3px solid #595959;
}
#display {
margin: 30px 0 20px 0;
padding-right: 2%;
width: 220px;
height: 30px;
border-radius: 4px;
box-shadow: 0px 0px 3px #595959;
text-align: right;
font: 27px bold;
color: #1A3C67;
background-color: #78c4ed;
}
#keys {
width: 43px;
height: 35px;
margin-left: 10px;
margin-bottom: 20px;
box-shadow: 0px 0px 15px #010012;
cursor: pointer;
font-style: italic;
color: lightblue;
background-color: rgb(0, 50, 68);
font-weight: bold;
font-size: 24px;
border-radius: 4px;
}
#keys:hover {
background: #1998cd;
font-weight: bold;
color: #1e185e;
}
#keysC {
width: 43px;
height: 35px;
margin-left: 10px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px #595959;
cursor: pointer;
font-style: italic;
color: #1A3C67;
background-color: lightblue;
font-weight: bold;
font-size: 16px;
border-radius: 4px;
}
#keysC:hover {
background: #7caad0;
font-weight: bold;
color: #1A3C67;
} <!DOCTYPE html>
<html>
<head>
<title>Financial Calculator</title>
<link rel="stylesheet" type="text/css" href="style123.css">
</head>
<body>
<div id="calculator">
<div class="fluid-container">
<form name="Financial Calculator">
<input type="text" id="display" name="ans" value="" class="form-control" placeholder="">
<br>
<div class="row">
<div>
<input type="reset" id="keysC" value="C">
<input type="reset" id="keysC" value="CE">
<input type="button" id="keysC" value="<--">
<input type="button" id="keysC" value="%" onclick="ans.value+='%'">
</div>
</div>
<br>
<input type="button" id="keys" value="7" onclick="ans.value+='7'">
<input type="button" id="keys" value="8" onclick="ans.value+='8'">
<input type="button" id="keys" value="9" onclick="ans.value+='9'">
<input type="button" id="keysC" value="/" onclick="ans.value+='/'">
<br>
<input type="button" id="keys" value="4" onclick="ans.value+='4'">
<input type="button" id="keys" value="5" onclick="ans.value+='5'">
<input type="button" id="keys" value="6" onclick="ans.value+='6'">
<input type="button" id="keysC" value="*" onclick="ans.value+='*'">
<br>
<input type="button" id="keys" value="1" onclick="ans.value+='1'">
<input type="button" id="keys" value="2" onclick="ans.value+='2'">
<input type="button" id="keys" value="3" onclick="ans.value+='3'">
<input type="button" id="keysC" value="-" onclick="ans.value+='-'">
<br>
<input type="button" id="keys" value="0" onclick="ans.value+='0'">
<input type="button" id="keys" value="." onclick="ans.value+='.'">
<input type="button" id="keys" value="=" onclick="ans.value=eval(ans.value)">
<input type="button" id="keysC" value="+" onclick="ans.value+='+'">
</form>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
An HTML id必须是唯一的，因此您不能拥有id="key"的多个输入。您可以轻松地将所有id代码切换为class代码。不要忘记css选择器！
onclick（注意全部小写）必须是function。一个简单的方法是使用<script>标记声明一个，然后在按钮的onclick标记中调用该函数。
例如：
<script>
function keyOnClick(symbol) {
document.getElementById('display').value += symbol
}
</script>
<input type="button" class="key" value="7" onclick="keyOnCick(this.value)">
答案 2 :(得分：0)
这是一个简单的计算器
#calc
{
width:300px;height:250px;background-color: pink; color: black;
}
#btn
{
width:100%;height:40px;font-size:20px;width: 40px;background-color: blue; padding-right: 10px
}form Name="calc">
<table id="calc" border=2>
<tr>
<td colspan=5><input style="width:300px; height: 40px; font-size: 20px " name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td>
<td style="display:none"><input name="M" type="number"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td>
<td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td>
<td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td>
<td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td>
<td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))">
</td>
<td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input id="btn" type=button value="÷" OnClick="calc.display.value+='/'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td>
<td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td>
<td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td>
<td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td>
<td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td>
</tr>
</table>
</form>