所以我一直在研究这个计算器，我已经弄清楚了一切，除了我想让结果框在结果为负数时显示红色文本。我以为我已经通过输入样式弄清楚了所有问题，但它就是不起作用。我已经尝试了几个小时的故障排除和在整个代码中进行更改，但我尝试过的任何方法都不起作用。任何帮助将不胜感激
<!DOCTYPE html>
<html>
<head>
<style>
input{
border: 1px solid black;
height: 50px;
width: 150px;
font-size: 20px;
color: black;
background-color: orange;
text-align: left;
margin: 0;
}
body{
width: 600px;
height: 300px;
background-image: url(https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
background-size: cover;
margin: auto;
padding-left: 5px;
padding-bottom: 5px;
}
button {
height: 35px;
width: 75px;
border-radius: 60px;
border: 1px solid white;
font-size: 30px;
font-family: fantasy;
background-color: black;
color: red;
}
button:focus,
input:focus {
outline:0;
}
button:hover{
color: orange;
background-color:whitesmoke;
}
h2{
color: dimgrey;
font-family: fantasy;
font-size: 45px;
height: 35px;
}
#box3{
visibility: hidden;
cursor: default;
width: 100%;
}
</style>
<script>
function doHide(){
document.getElementById('resultbox').style.visibility = 'hidden';
}
function addTwoNumbers () {
var number1 = document.getElementById('box1').value;
var number2 = Number(document.getElementById('box2').value);
var sum = Number(number1) + number2;
document.getElementById('resultBox').value = sum;
if(sum<0) {
document.getElementById('resultbox').style.color = "red";
}
else{
document.getElementById('resultbox').style.color = "black";
}
document.getElementById('resultbox').style.visibility = 'visible';
document.getElementById('resultbox').value = sum
}
</script>
<script>
function subtractTwoNumbers () {
var number1 = document.getElementById('box1').value;
var number2 = Number(document.getElementById('box2').value);
var difference = Number(number1) - number2;
document.getElementById('resultBox').value = difference;
if(sum<0) {
document.getElementById('resultbox').style.color = "red";
}
else{
document.getElementById('resultbox').style.color = "black";
}
document.getElementById('resultbox').style.visibility = 'visible';
document.getElementById('resultbox').value = sum
}
</script>
<script>
function divideTwoNumbers () {
var number1 = document.getElementById('box1').value;
var number2 = Number(document.getElementById('box2').value);
var quotient = Number(number1) / number2;
document.getElementById('resultBox').value = quotient;
if(sum<0) {
document.getElementById('resultbox').style.color = "red";
}
else{
document.getElementById('resultbox').style.color = "black";
}
document.getElementById('resultbox').style.visibility = 'visible';
document.getElementById('resultbox').value = sum
}
</script>
<script>
function multiplyTwoNumbers () {
var number1 = document.getElementById('box1').value;
var number2 = Number(document.getElementById('box2').value);
var result = Number(number1) * number2;
document.getElementById('resultBox').value = result;
if(sum<0) {
document.getElementById('resultbox').style.color = "red";
}
else{
document.getElementById('resultbox').style.color = "black";
}
document.getElementById('resultbox').style.visibility = 'visible';
document.getElementById('resultbox').value = sum
}
</script>
<script>
function useExponents () {
var base = document.getElementById('box1').value;
var exponents = Number(document.getElementById('box2').value);
var result = getPower(base,exponents);
document.getElementById('resultBox').value = result;
if(sum<0) {
document.getElementById('resultbox').style.color = "red";
}
else{
document.getElementById('resultbox').style.color = "black";
}
document.getElementById('resultbox').style.visibility = 'visible';
document.getElementById('resultbox').value = sum
}
</script>
<script>
function getPower(number,power){
var sum = 1;
for (var i = 0; i < power; i++){
sum *= number;
}
return sum;
if(sum<0) {
document.getElementById('resultbox').style.color = "red";
}
else{
document.getElementById('resultbox').style.color = "black";
}
document.getElementById('resultbox').style.visibility = 'visible';
document.getElementById('resultbox').value = sum
}
</script>
<script>
function clearall() {
document.getElementById('box1').value = "";
document.getElementById('box2').value = "";
document.getElementById('resultBox').value = "";
}
</script>
</head>
<body onload="doHide()">
<div id='calc' align="center"></div>
<h1>Calculator</h1>
<input type="text" id="box1"> <br/>
<input type="text" id="box2">
<button onclick="addTwoNumbers()">+</button>
<button onclick="subtractTwoNumbers()">-</button>
<button onclick="divideTwoNumbers()">/</button>
<button onclick="multiplyTwoNumbers()">*</button>
<button onclick="useExponents()">^</button>
<button onclick="clearall()">clear</button>
<br/>
<br/>
<input type="text" id="resultBox"> <br/>
</body>
</html>
我认为您需要重命名JS中的resultbox以匹配HTML id属性中的"resultBox"，js区分大小写。
尝试
if(sum<0) {
document.getElementById('resultBox').style.color = "red";
}
您可能可以找到/替换"resultbox"的所有实例，并一次性将它们更改为resultBox，它应该可以改进所有实例。
您应该在整个代码中检查 resultBox 的大小写。有时使用驼峰大小写，有时使用小写。代码根本找不到元素并且不会执行
调试时，请始终尝试通过在控制台上键入元素来查看代码是否找到该元素。只需将"document.getElementById(...("复制到控制台中，然后按回车键即可。然后看看它是否返回任何内容。然后添加样式元素，然后更改颜色，看看它是否有效。