所以我一直在研究这个计算器，除了我想让结果框在结果为负数时显示红色文本外，我已经想通了所有事情。我以为我已经通过添加样式来解决所有问题，但是它不起作用。我已经尝试了几个小时的故障排除和对我的代码进行更改，但我尝试过的任何东西都不起作用。任何帮助将不胜感激
<!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 中的结果框以匹配 HTML id 属性中的“resultBox”，js 区分大小写。
尝试
if(sum<0) {
document.getElementById('resultBox').style.color = "red";
}
您可能可以找到/替换“resultbox”的所有实例，并一次性将它们更改为 resultBox，它应该会改进所有实例。
关于javascript - 尝试制作一个在结果为负数时显示红色文本的计算器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59164971/