将颜色格式添加到 IF ELSE 结果

Adding color formatting to IF ELSE result

本文关键字：IF ELSE 结果 添加 颜色 格式      更新时间：2023-09-26

>我有一个非常基本的 if else 代码，返回"正确"或"不正确"

如何设置此文本的格式，以便"正确"显示为绿色，"不正确"显示为红色

???

<html>
<script language="javascript">
function QA1()
{
    var ANSWER = document.getElementById("ANSWER").value;
    var RESULT;
    if (ANSWER == '2') {
    RESULT = "CORRECT";
} else {
    RESULT = "INCORRECT";
} 
document.getElementById("RESULT1").innerHTML = RESULT;
}
</script>

<body>
<form method="post">
    <p><input type="text" length="3" id="ANSWER">&nbsp;&nbsp;
<input type="button" value="Enter" onclick="QA1()"></p>
</form>
<p id="RESULT1"></p>
</body>
</html>

使用 style.color 属性修改元素的颜色。

    function QA1()
    {
        var ANSWER = document.getElementById("ANSWER").value;
        var resultCorrect = ANSWER === '2' ? true : false;
        var result1 = document.getElementById("RESULT1");
        var color;
        var resultText;
        if(resultCorrect)
        {
           color = 'green';
           resultText = 'CORRECT';
        }
        else
        {
           color = 'red';
           resultText = 'INCORRECT';
        }
        result1.style.color = color;
        result1.innerHTML = resultText;
    }

来自 W3Schools 文档：

若要更改 HTML 元素的样式，请使用以下语法：

document.getElementById(id).style.property=new style

下面的示例更改 <p> 元素的样式：

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>

所以你可以做到：

var element = document.getElementById("RESULT1");
element.innerHTML = RESULT;
element.style.color = RESULT === 'CORRECT' ? 'green' : 'red';
相关文章：