尝试制作一个计算器，当结果为负数时显示红色文本
[英]Trying to make a calculator that shows red text when the result is a negative number
问题描述
so I've been working on this calculator and I have everything figured out except that I want to make the result box show red text when the result is a negative number.
所以我一直在研究这个计算器，除了当结果为负数时我想让结果框显示红色文本外，我已经弄清楚了一切。 I thought I had everything figured out by putting in the styles however it just isn't working.我以为我已经通过放入样式来解决所有问题，但是它不起作用。 I have tried troubleshooting and making changes throughout my code for a couple of hours, but nothing I have tried works.我已经尝试了几个小时的故障排除和整个代码的更改，但我尝试过的一切都不起作用。 Any help would be appreciated任何帮助，将不胜感激
<!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>
2 个解决方案
解决方案1
3
I think you need to rename resultbox in the JS to match 'resultBox' in the HTML id prop, js is case sensitive.我认为您需要重命名 JS 中的结果框以匹配 HTML id 道具中的“resultBox”，js 区分大小写。
try尝试
if(sum<0) {
document.getElementById('resultBox').style.color = "red";
}
You can probably find/replace all instances of 'resultbox' and change them to resultBox with one go and it should improve all the instances.您可能可以找到/替换“resultbox”的所有实例并将它们一次性更改为 resultBox ，它应该改进所有实例。
解决方案2
0 2019-12-03 20:47:43
You should check the case of the resultBox throughout your code.您应该在整个代码中检查 resultBox 的大小写。 You sometimes use camelcase and sometimes lowercase.您有时使用驼峰字母，有时使用小写。 The code will simply not find the element and not execute代码将根本找不到元素并且不会执行
When debugging, always try to see if the code finds the element by typing it on the console.调试时，始终尝试通过在控制台上键入来查看代码是否找到该元素。 Just copy the 'document.getElementById(...)' into the console and hit enter.只需将“document.getElementById(...)”复制到控制台并按回车键即可。 Then see if it returns anything.然后看看它是否返回任何东西。 Then add the style element and then your color change and see if it works.然后添加样式元素，然后更改颜色，看看它是否有效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.