-3

我不知道这个简单的javascript哪里出错了

<!DOCTYPE html>
<html>
<head>
<title> </title>
<script>
   function changeColor() {
        var elem = document.getElementById("para1");
        if (elem.style.color == black) {
            elem.style.color = blue
        }
        else if (elem.style.color == blue) {
            elem.style.color = red
        }
        else if (elem.style.color == red) {
            elem.style.color = black
        }
    }
    </script>
</head>

<body>
    <p id="para1"> Some text here</p>
    <button onclick='changeColor();'>Change!</button>
    <!-- <button onclick='changeColor("red");'>red</button> -->
</body>
</html>

使用 javascript 比 VBA 更难实现调试 - 我使用它。

4

3 回答 3

3

有两个问题。

第一个是每个人都指出的，在分配颜色值时应该使用字符串，例如：

elem.style.color = "black";

但第二个更微妙。您返回的字符串elem.style.color不是可靠的or等​​，即使这是您分配的字符串。它可以是或类似的。"black""blue""rgb(0,0,0)"

因此，您需要单独跟踪“当前”颜色，如下所示：

function changeColor() {
    var elem = document.getElementById("para1");
    var color = elem.getAttribute("data-color");
    if (!color || color == "black") {
        color = elem.style.color = "blue";
    }
    else if (color == "blue") {
        color = elem.style.color = "red";
    }
    else if (color == "red") {
        color = elem.style.color = "black";
    }
    elem.setAttribute("data-color", color);
}

在那里，我使用了一个data-*属性来跟踪我分配给元素的颜色，以一种我知道不会转换为 RGB 值的方式。（而且我还使用了字符串，而不是变量名，用于诸如此类的事情"black"。"blue"）

于 2013-05-18T23:47:45.527 回答
2

您的颜色值周围缺少引号。

elem.style.color = 'red';
于 2013-05-18T23:36:34.277 回答
-1

没有引号，它们被读取为变量，添加引号以将它们检查为字符串

var elem = document.getElementById("para1");
    switch(elem.style.color){
       case 'black':
                elem.style.color = 'blue'
                break;
       case 'blue':
                elem.style.color = 'red';
                break;
       case 'red':
                elem.style.color = 'black';
                break;
    }
于 2013-05-18T23:37:40.217 回答