为什么当我按下计算器上的任何/每个按钮时，我用JavaScript、HTML和CSS编码的计算器都显示未定义？我搜索了一些解决方案，但唯一发现的是使用==是不正确的，会造成这个问题，但我在任何代码中都没有使用==。我对JavaScript还很陌生，所以我很迷茫。
我在下面添加了HTML、JavaScript和CSS。不过，当我在=.value+val；(未定义然后消失，但它只是保持空白(
function clk(val){
document.getElementById("screen").value=document.getElementById("screen").value+val;
}
function clrdisp(){
document.getElementById("screen").value=""
}
function eql(){
var text=document.getElementById("screen").value;
var result=eval(text);
document.getElementById("screen").value=result
}body{
background: whitesmoke;
}
#mainbody{
margin-left: 40%;
margin-top: 2px;
background: linear-gradient(#eeaeca, #94bbe9);
width: 350px;
height: 450px;
border: solid 6px;
border-color: #708193;
border-radius: 12px;
}
#screen{
border-width: 5px;
margin-left: 18px;
width: 85%;
height: 4ipx;
margin-top: 13px;
border-color: #708193;
border-radius: 8px;
font-size: xx-large;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
pointer-events: none;
}
.but{
width: 248px;
height: 334px;
margin-left: 1px;
}
button{
width: 37px;
height: 45px;
margin-top: 16px;
background: linear-gradient(#22c1c3, #708193);
margin-left: 16px;
border: solid pink;
border-radius: 34px;
font-size: 24px;
font-weight: 600;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
button:hover{
cursor: pointer;
background: linear-gradient(#eeaeca, #708193);
}<html>
<head>
<title>Calculator</title>
<link type="text/css" href="style.css" rel="stylesheet">
<script src="javascript.js"></script>
</head>
<body>
<div id="mainbody">
<div>
<input type="text" id="screen">
</div>
<div class="but">
<div class="row">
<button onclick="clk()">C</button>
</div>
<div class="row">
<button onclick="clk()">9</button>
<button onclick="clk()">8</button>
<button onclick="clk()">7</button>
<button onclick="clk()">/</button>
</div>
<div class="row">
<button onclick="clk()">4</button>
<button onclick="clk()">5</button>
<button onclick="clk()">6</button>
<button onclick="clk()">X</button>
</div>
<div class="row">
<button onclick="clk()">1</button>
<button onclick="clk()">2</button>
<button onclick="clk()">3</button>
<button onclick="clk()">-</button>
</div>
<div class="row">
<button onclick="clk()">0</button>
<button onclick="clk()">.</button>
<button onclick="clk()">=</button>
<button onclick="clk()">+</button>
</div>
</div>
</body>
</html>您必须向按钮添加value属性，并将该值传递给clk(this.value(函数onclick，然后编写自己的逻辑，无论您想做什么
请检查以下代码片段
function clk(val) {
document.getElementById('screen').value =
document.getElementById('screen').value + val;
}
function clrdisp(val) {
document.getElementById('screen').value = '';
}
function eql(val) {
var text = document.getElementById('screen').value;
var result = eval(text);
document.getElementById('screen').value = result;
}body{
background: whitesmoke;
}
#mainbody{
margin-left: 40%;
margin-top: 2px;
background: linear-gradient(#eeaeca, #94bbe9);
width: 350px;
height: 450px;
border: solid 6px;
border-color: #708193;
border-radius: 12px;
}
#screen{
border-width: 5px;
margin-left: 18px;
width: 85%;
height: 4ipx;
margin-top: 13px;
border-color: #708193;
border-radius: 8px;
font-size: xx-large;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
pointer-events: none;
}
.but{
width: 248px;
height: 334px;
margin-left: 1px;
}
button{
width: 37px;
height: 45px;
margin-top: 16px;
background: linear-gradient(#22c1c3, #708193);
margin-left: 16px;
border: solid pink;
border-radius: 34px;
font-size: 24px;
font-weight: 600;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
button:hover{
cursor: pointer;
background: linear-gradient(#eeaeca, #708193);
}<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<div id="mainbody">
<div>
<input type="text" id="screen">
</div>
<div class="but">
<div class="row">
<button value="C" onclick="clrdisp(this.value)">C</button>
</div>
<div class="row">
<button value="9" onclick="clk(this.value)">9</button>
<button value="8" onclick="clk(this.value)">8</button>
<button value="7" onclick="clk(this.value)">7</button>
<button value="/" onclick="clk(this.value)">/</button>
</div>
<div class="row">
<button value="4" onclick="clk(this.value)">4</button>
<button value="5" onclick="clk(this.value)">5</button>
<button value="6" onclick="clk(this.value)">6</button>
<button value="*" onclick="clk(this.value)">*</button>
</div>
<div class="row">
<button value="1" onclick="clk(this.value)">1</button>
<button value="2" onclick="clk(this.value)">2</button>
<button value="3" onclick="clk(this.value)">3</button>
<button value="-" onclick="clk(this.value)">-</button>
</div>
<div class="row">
<button value="0" onclick="clk(this.value)">0</button>
<button value="." onclick="clk(this.value)">.</button>
<button value="=" onclick="eql(this.value)">=</button>
<button value="+" onclick="clk(this.value)">+</button>
</div>
</div>
</body>
</html>这是因为在从按钮执行clk()函数时没有传递val变量。
您需要执行这样的函数：clk([number])，或者制作一个带有sender参数的函数。