我的名字是Daniel Asa。2我开始了一个项目来练习把下面的代码变成HTML
function display(val) {
document.getElementById("id").value += val;
}
function solve() {
let x = document.getElementById("id").value;
let y = eval(x);
document.getElementById("id").value = y;
}
function clr(){
document.getElementById("id").value = " ";
}* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f1f1f1f1;
font-family: sans-serif;
}
.calculator {
width: 300px;
padding-bottom: 15px;
border-radius: 7px;
background-color: black;
box-shadow: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);
}
.display {
width: 100%;
height: 80px;
border: none;
box-sizing: border-box;
padding: 10px;
font-size: xx-large;
background-color: #cccecc;
color: black;
text-align: right;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
button {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
outline: none;
font-size: x-large;
background-color: white;
color: black;
margin: 10px;
}
button:hover{
cursor: pointer;
}
.row {
display: flex;
justify-content: space-between;
}
.operators {
background-color: #ff9500;
font-weight: bold;
color: black;
}
.equals {
background-color: rgb(85, 84, 84);
font-weight: bold;
color: black;
}<div class="calculator">
<input type="text" class="display" id="id">
<div class="keys">
<div class="row">
<button value="7" onclick="('7')">7</button>
<button value="8" onclick="('8')">8</button>
<button value="9" onclick="('9')">9</button>
<button value="+" class="operators" onclick="('+')">+</button>
</div>
<div class="row">
<button value="4" onclick="('4')">4</button>
<button value="5" onclick="('5')">5</button>
<button value="6" onclick="('6')">6</button>
<button value="-" class="operators" onclick="('-')">-</button>
</div>
<div class="row">
<button value="1" onclick="('1')">1</button>
<button value="2" onclick="('2')">2</button>
<button value="3" onclick="('3')">3</button>
<button value="*" class="operators"onclick="('*')">*</button>
</div>
<div class="row">
<button value="C" class="operators" onclick="clr()">C</button>
<button value="0" onclick="('0')">0</button>
<button value="/" class="operators" onclick="('/')">/</button>
<button value="=" class="equals" onclick="solve()">=</button>
</div>
</div>到目前为止没有问题，但我不知道为什么在项目的输出中，当我点击我放的值时，它就像一个按钮，我点击我放的输入，它不显示？
有没有人知道这个问题，因为据我所知，我走的是正确的道路？
1条答案
按热度按时间hs1ihplo1#
我不确定我是否正确理解了您的意思。但是您错过了调用display函数。您应该在您的
onClick处理程序中调用display('0')，而不是简单地调用('0')