為什么當我按下計算器上的任何/每個按鈕時，我使用 JavaScript、HTML 和 CSS 撰寫的計算器顯示未定義？我搜索了一些解決方案，但我發現唯一的一個是使用 == 是不正確的并且會產生這個問題，但我沒有在我的任何代碼中使用 ==。我對 JavaScript 很陌生，所以我很迷茫。
我在下面添加了我的 HTML、JavaScript 和 CSS。當我更改 = .value val; 時，我確實注意到了我的 Javascript。（未定義然后消失，但它只是保持空白）
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>uj5u.com熱心網友回復：
您必須為按鈕添加 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>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</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="X" onclick="clk(this.value)">X</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>uj5u.com熱心網友回復：
那是因為從按鈕val執行功能時不傳遞變數。clk()
您需要像這樣執行函式：clk([number])或使用 sender 引數創建函式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439717.html
標籤：javascript html jQuery css