How to make negative outputs on html, JS, and css calculator display red?

Question

I am trying to use and if/then comparison to make negative numbers turn red in their output box after being processed through calculator functions. For example, in my adding function, I am using innerHTML with a

tag to display the answer in its own box. But with innerHTML and using a string, I can't figure out how to make negative numbers turn red and positive turn green. I have tried to get help and was told that I need to "do the comparison first" because the if/then is "comparing the string to 0". I am not sure what that means and I don't know how to fix it. I have put my script and the connected HTML.

function powNumbers() {
            var result = 1;
            var val1 = Number(document.getElementById("value1").value);
            var val2 = Number(document.getElementById("value2").value);
            for (let counter = 0; counter < val2; counter = counter + 1) {
            result = answer * val1;
            }
            var ansD = powN;
            var output = document.getElementById("result");
            if (ansD >= 0) {
             output.style.color = "green";
             } else {
             output.style.color = "red";
    }
             output.innerHTML = output;
        }

<div align="center">
  <input class="boxes" type="text" id="value1" name="value1" value="" /><br />
  <input class="boxes" type="text" id="value2" name="value2" value="" /><br />
  <button class="stripeButtons buttonRound" onclick="addNumbers()">+</button>
  <button class="stripeButtons buttonRound" onclick="subNumbers()">-</button>
  <button class="stripeButtons buttonRound" onclick="multNumbers()">*</button>
  <button class="stripeButtons buttonRound" onclick="divNumbers()">/</button>
  <button class="stripeButtons buttonRound" onclick="powNumbers()">^</button>
  <button class="stripeButtons buttonRound" onclick="clearFields()">Clear</button><br />
  <input class="boxes" type="text" id="answer" name="answer" value="" />
  <p class="boxes" id="result" value=""></p>
</div>

Answer 1

You weren't too far off. In the following code, I made a couple corrections to get you there:

1) You don't need ansD.value , it's just ansD

2) You need to set the style of the output element, not the answer value

 function addNumbers () { var val1 = Number(document.getElementById("value1").value); var val2 = Number(document.getElementById("value2").value); var addN = val1 + val2; var ansD = addN; var output = document.getElementById("result"); if (ansD >= 0) { output.style.color = "green"; } else { output.style.color = "red"; } output.innerHTML = ansD; }

 <div align="center"> <input class="boxes" type="text" id="value1" name="value1" value=""/><br> <input class="boxes" type="text" id="value2" name="value2" value=""/><br> <button class="stripeButtons buttonRound" onclick="addNumbers()">+</button> <button class="stripeButtons buttonRound" onclick="subNumbers()">-</button> <button class="stripeButtons buttonRound" onclick="multNumbers()">*</button> <button class="stripeButtons buttonRound" onclick="divNumbers()">/</button> <button class="stripeButtons buttonRound" onclick="powNumbers()">^</button> <button class="stripeButtons buttonRound" onclick="clearFields()">Clear</button><br> <input class="boxes" type="text" id="answer" name="answer" value=""/> <p class="boxes" id="result" value=""></p> </div>