CODEWITHSUNDEEP
javascripthtmlcssmathcolors
Shawn Lee
Shawn Lee

Reputation: 33

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>

Upvotes: 0

Views: 349

Answers (2)

Frido Emans
Frido Emans

Reputation: 5586

You should check the case of the resultBox throughout your code. 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. Then see if it returns anything. Then add the style element and then your color change and see if it works.

Upvotes: 0

user6499789
user6499789

Reputation:

I think you need to rename resultbox in the JS to match 'resultBox' in the HTML id prop, js is case sensitive.

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.

Upvotes: 3

Related Questions