简体   繁体   English

尝试制作一个计算器,当结果为负数时显示红色文本

[英]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>

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 ,它应该改进所有实例。

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.

相关问题 做了一个计算器,当值为负时需要文本变成红色 - Made a calculator, need text to turn red when the value is negative 如何使 html、JS 和 css 计算器上的负输出显示为红色? - How to make negative outputs on html, JS, and css calculator display red? 我正在尝试制作一个在值为 true 时显示红色的按钮 - I am Trying to make a Button that shows red color when the value is true 舍入数字显示正数和负数的不同结果 - Rounding off number shows different result on positive and negative numbers 如果比较错误,尝试使按键编号变为红色 - Trying to make keydown number turn red if wrong in comparison 我试图找到一种方法,所以当它低于某个 y 时,文本将变为红色(p5.js) - Im trying to find a way to make it so when it goes below a certain y the text will change to a red color (p5.js) 如果是负数,请输入数字ASCII - Make a number ASCII if negative 随机大数计算器什么也没显示 - Random large number calculator shows nothing 试图让文本说一个变量,但它只显示 [object HTMLDivElement] - trying to make a text say a variable, but it just shows [object HTMLDivElement] 创建宏计算器 - 尝试添加下拉菜单时获得 NaN 结果 - Creating a macro calculator - getting a NaN result when trying to add a drop down menu
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM