【发布时间】：2021-08-27 14:30:45
【问题描述】：
我使用 HTML、CSS 和 Javascript 创建了一个计算器。
虽然数字 1 到 9 的按钮加上运算符 +、-、*、/ 和 % 可以正常工作，但数字 0、C 和 = 不起作用。
不起作用的按钮的代码与起作用的按钮的代码非常相似，所以我不确定是什么问题。
下面是代码：
document.getElementById("one").addEventListener("click", () => {
document.getElementById("calculation").value += "1";
});
document.getElementById("two").addEventListener("click", () => {
document.getElementById("calculation").value += "2";
});
document.getElementById("three").addEventListener("click", () => {
document.getElementById("calculation").value += "3";
});
document.getElementById("four").addEventListener("click", () => {
document.getElementById("calculation").value += "4";
});
document.getElementById("five").addEventListener("click", () => {
document.getElementById("calculation").value += "5";
});
document.getElementById("six").addEventListener("click", () => {
document.getElementById("calculation").value += "6";
});
document.getElementById("seven").addEventListener("click", () => {
document.getElementById("calculation").value += "7";
});
document.getElementById("eight").addEventListener("click", () => {
document.getElementById("calculation").value += "8";
});
document.getElementById("nine").addEventListener("click", () => {
document.getElementById("calculation").value += "9";
});
document.getElementById("period").addEventListener("click", () => {
document.getElementById("calculation").value += ".";
});
document.getElementById("add").addEventListener("click", () => {
document.getElementById("calculation").value += "+";
});
document.getElementById("subtract").addEventListener("click", () => {
document.getElementById("calculation").value += "-";
});
document.getElementById("multiply").addEventListener("click", () => {
document.getElementById("calculation").value += "*";
});
document.getElementById("divide").addEventListener("click", () => {
document.getElementById("calculation").value += "/";
});
document.getElementById("percentage").addEventListener("click", () => {
document.getElementById("calculation").value += "*(1/100)";
});
//clear calculation
document.getElementById("clear").addEventListener("click", () => {
document.getElementById("calculation").value = "0";
});
// get result
document.getElementById("getResult").addEventListener("click", () => {
document.getElementById("result").value = eval(document.getElementById("calculation").value);
});:root {
--main-color: darkblue;
--secondary-color: blue;
--tertiary-color: #318ce7;
--dark-color: #444;
--light-color: #fafafa;
}
body {
font-family: "Montserrat", sans-serif;
background-color: var(--light-color);
color: var(--dark-color);
margin-top: 0px;
margin-bottom: 0px;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
height: 100vh;
}
.calculator {
box-shadow: var(--main-color) 1px 1px 1em;
border-radius: 1em;
height: fit-content;
width: 370px;
background-image: linear-gradient(-135deg,var(--secondary-color),var(--tertiary-color),var(--secondary-color));
overflow: hidden;
}
.output {
background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color));
color: var(--tertiary-color);
padding: 2em 0px;
}
.result,.calculation {
display: flex;
flex-direction: row-reverse;
align-content: center;
align-items: center;
justify-content: end;
}
#result,#calculation {
padding: 0.3em 10px;
background-color: transparent;
color: var(--light-color);
border: none;
text-align: right;
font-size: inherit;
}
::placeholder {
color: var(--light-color);
}
#result {
font-size: 1.3em;
}
.result {
height: 50px;
font-size: 30px;
}
.calculation {
height: 40px;
font-size: 25px;
}
.keyboard {
padding: 20px 10px;
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto auto;
}
button {
margin: 0.2em 0.2em;
border: none;
border-radius: 0.2em;
height: 40px;
opacity: 50%;
color: var(--main-color);
font-size: 15px;
font-weight: bolder;
}
button:hover {
background-image: linear-gradient(-45deg,var(--secondary-color),var(--tertiary-color),var(--secondary-color));
color: var(--light-color);
box-shadow: var(--main-color) 1px 1px 1em;
transition-duration: 400ms;
}
button:active {
background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color));
color: var(--light-color);
opacity: 100%;
transition-duration: 400ms;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="calculator">
<section class="output">
<section class="result">
<input id="result" placeholder="0" disabled />
</section>
<section class="calculation">
<input id="calculation" disabled placeholder="0" />
</section>
</section>
<section class="keyboard">
<button id="clear">C</button>
<button id="brackets">( )</button>
<button id="percentage">%</button>
<button id="divide">/</button>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button>
<button id="multiply">X</button>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button>
<button>-</button>
<button id="one" class="getResult2">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="add">+</button>
<button id="change-sign">+/-</button>
<button id="zero">0</button>
<button id="period">.</button>
<button id="getResult">=</button>
</section>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>你能帮我找出问题所在吗？
另外，我想写一个规则，其中 id "result" 的输入会在输入 id 为 "calculation" 的输入发生变化时自动更新，但它不起作用。
【问题讨论】：
-
How do I ask a good question?：添加一个minimal reproducible example，它不会引发不属于问题的错误。
-
请修剪您的代码，以便更容易找到您的问题。请按照以下指南创建minimal reproducible example。
标签： javascript html css error-handling