簡體   English   中英

如何使 html、JS 和 css 計算器上的負輸出顯示為紅色?

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

我正在嘗試使用和 if/then 比較使負數在通過計算器函數處理后在其輸出框中變為紅色。 例如,在我的添加函數中,我使用帶有

標記以在其自己的框中顯示答案。 但是使用innerHTML並使用字符串,我無法弄清楚如何使負數變為紅色而正數變為綠色。 我試圖尋求幫助並被告知我需要“先進行比較”,因為 if/then 是“將字符串與 0 進行比較”。 我不確定這意味着什么,我不知道如何解決它。 我已經放置了我的腳本和連接的 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>

你離得太遠了。 在下面的代碼中,我做了一些更正,讓你到達那里:

1)你不需要ansD.value ,它只是ansD

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-2024 STACKOOM.COM