简体   繁体   English

如何使 html、JS 和 css 计算器上的负输出显示为红色?

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

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.我正在尝试使用和 if/then 比较使负数在通过计算器函数处理后在其输出框中变为红色。 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.但是使用innerHTML并使用字符串,我无法弄清楚如何使负数变为红色而正数变为绿色。 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".我试图寻求帮助并被告知我需要“先进行比较”,因为 if/then 是“将字符串与 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.我已经放置了我的脚本和连接的 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>

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 1)你不需要ansD.value ,它只是ansD

2) You need to set the style of the output element, not the answer value 2)您需要设置输出元素的style ,而不是答案值

 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2025 STACKOOM.COM