如何在JavaScript中單擊按鈕更改CSS類？

Question

我對我在做什么錯感到困惑，在這里我正在學習一個教程，對他們來說效果很好，但對我卻不行。 我已經切換了許多方法來嘗試發現問題，但似乎似乎沒有用。

的HTML

<h1 class="settingOne" id="mainText">Simple HTML Page</h1>
    <p class="center">
        This is a very simple HTML page.
    </p>

    <p class="center">It's about as basic as they come. It has: </p>

    <ul class="center">
        <li>An H1 Tag</li>
        <li>Two paragraphs</li>
        <li>An unordered list</li>
    </ul>

    <button id="changeButton">
        <p>
            Hey push this to change the header thing
        </p>
    </button>

的CSS

.settingOne {
    font-family: fantasy;
    color: blue;
    text-align: center;
}

.settingTwo {
    font-family: serif;
    color: red;
    text-align: center;
}

JAVASCRIPT

function changeClass() {
    document.getElementById("changeButton").onclick = function () {
        if (document.getElementById("mainText").className === "settingOne") {
            document.getElementById("mainText").className = "settingTwo";
        } else {
            document.getElementById("mainText").className === "settingOne";
        }
    };
}

window.onload = function () {
    preparePage();
}

;

Answer 1

在Javascript中，

else { document.getElementById("mainText").className === "settingOne"; }    

應該更改為

else { document.getElementById("mainText").className = "settingOne"; }    

單個=用來將一件事設置為等於另一件事，這就是您想要的行為。

工作示例： https ： //jsfiddle.net/w6no44v1/20/

Answer 2

尚不清楚是否曾經調用過changeClass函數。 我提供了一個示例，通過將第一個查詢存儲到變量ele的元素changeButton ，然后在window.onload事件發生時注冊單擊處理程序，來稍微整理代碼。 當然，您可以將其全部包裝到另一個名為registerHandlers函數中，或者將其放在preparePage函數中。

window.onload = function () {
    var ele = document.getElementById("changeButton");
    ele.onclick = function() {
        if(ele.className === "settingOne") {
            ele.className = "settingTwo";
        } else {
            ele.className = "settingOne";
        }
    };
};