Question

我无法弄清楚这个简单的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实现调试要困难得多 - 我已经习惯了。

Answer 1

有两个问题。

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

elem.style.color = "black";

但第二个更微妙。您从elem.style.color返回的字符串不可靠"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-* attribute跟踪我分配给元素的颜色，我知道这种颜色不会转换为RGB值。（我还使用了字符串，而不是变量名，用于"black"和"blue"之类的东西。）

Answer 2

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

elem.style.color = 'red';

Answer 3

如果没有引号，它们将被读作变量，添加引号以将其作为字符串

进行检查

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;
    }

简单的JavaScript无法弄清楚它的错误

3 个答案: