How to change css classes with a button click in javascript?

Question

I'm confused on what I'm doing wrong here I'm following a tutorial and it works fine for them but not me. I've switched around many things to try to find the problem but it just doesn't seem to work.

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

;

Call changeClass() from within your onload handler. (And what is preparePage(), which you call from onload but haven't shown.) — nnnnnn
– nnnnnn, Commented Feb 22, 2016 at 0:34
document.getElementById("mainText").className === "settingOne"; you should assign value on this line, in else statement, not check — The Process
– The Process, Commented Feb 22, 2016 at 0:35

hxlnt · Accepted Answer · 2016-02-22 00:55:46Z

4

In the Javascript, the line

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

should be changed to

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

The single = is used to set one thing equal to another, which is the behavior you want here.

Working example: https://jsfiddle.net/w6no44v1/20/

edited Feb 22, 2016 at 0:55

answered Feb 22, 2016 at 0:37

hxlnt

6467 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cosmichero2025 Over a year ago

I did what you said and your right it was wrong.... don't know how i missed that. It didn't fix the problem though someone in the comments above told me to call the changeClass function not sure where to though, I'm new to this so I'm just testing the waters. Oh and I got rid of the preparePage()

hxlnt Over a year ago

Just added a JSFiddle link with sample code for you! Let me know if this is helpful. :)

hxlnt Over a year ago

Also be sure to note where your Javascript is placed--is it in the <head> or at the end <body> of your HTML file? You haven't specified that in your question, but the placement does matter for this example. (In my JSFiddle sample, it's in the body.) Happy coding!

ThisClark · Accepted Answer · 2016-02-22 00:45:31Z

3

It's not clear if your changeClass function is ever called. I provide an example that cleans up your code a bit by storing the first query to the element changeButton in the variable ele and then registering the click handler when the window.onload event occurs. You could of course wrap this all up in another function called registerHandlers or put it in your preparePage function instead.

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

answered Feb 22, 2016 at 0:45

ThisClark

14.9k11 gold badges73 silver badges103 bronze badges

1 Comment

cosmichero2025 Over a year ago

When I used it changed the text of the thing that was triggering the onClick but I added another variable that was connected to the h1 tag i wanted to changed moved some stuff around and boom there it was. Thank you :D and sry about the question not being that descriptive im still getting used to both stack overflow and javascript.

Collectives™ on Stack Overflow

How to change css classes with a button click in javascript?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related