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

デバッグは、VBA よりも JavaScript の方がはるかに難しいことを認識してください。私はそれを使用しています。

4

3 に答える 3

3

2 つの問題があります。

最初のものは誰もが指摘したものです。色の値を割り当てるときは文字列を使用する必要があります。

elem.style.color = "black";

しかし、2番目はより微妙です。返される文字列は、割り当てたものであっても、確実にまたはなどで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);
}

そこでは、RGB 値に変換されないことがわかっている方法で、要素に割り当てた色を追跡するためにdata-*属性を使用しました。(また、変数名ではなく、文字列などを使用しまし"black"た"blue"。)

于 2013-05-18T23:47:45.527 に答える
2

色の値を囲む引用符がありません。

elem.style.color = 'red';
于 2013-05-18T23:36:34.277 に答える