如何在javascript中点击按钮更改css类?

时间:2016-02-22 00:30:42

标签: javascript html css

我对我在这里做错了什么感到困惑我跟随一个教程并且它适用于他们但不适合我。我已经转过很多东西试图找到问题,但它似乎没有用。

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

2 个答案:

答案 0 :(得分:3)

在Javascript中,行

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

应改为

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

single =用于设置一个等于另一个的东西,这就是你想要的行为。

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

答案 1 :(得分:1)

目前尚不清楚您的Schema2 = new SimpleSchema({ aaitem: { type: String }, aanitem: { type: String }, refItem: { type: Mongo.ObjectID } }); 功能是否被调用过。我提供了一个示例,通过将第一个查询存储到变量changeClass中的元素changeButton,然后在ele事件发生时注册click处理程序来稍微清理代码。你当然可以将这一切包装在另一个名为window.onload的函数中,或者将它放在你的registerHandlers函数中。

preparePage