2

I want change the class of a div any time, no mater what class it has. If the div has the class "mystyle" I want it to change into "mystyle1", and vice versa. My code is this:

<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}

.mystyle1 {
    width: 100px;
    height: 100px;
    background-color: black;
    color: coral;
    font-size: 30px;
}
</style>
</head>
<body>

<p>Click the button to change the style class from DIV.</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" class="mystyle">
I am a DIV element
</div>

<script>
function myFunction() {
    var x = document.getElementById("myDIV");

    if (x.classList.contains("mysyle")) {
        x.classList.replace("mystyle", "mystyle1");
    } if (x.classList.contains("mysyle1")) {
        x.classList.replace("mystyle1", "mystyle");
    }
}
</script>

</body>
</html>

When we press the buttom it has to change the css style any time. But it doesn't. I think that the problem has something to be with the mixed of the conditional (classList.contains) and the classList.replace, because I did it separately and it worked.

Do you know what it is my problem? Thank you.

David Zomada
  • 167
  • 1
  • 5
  • 22

3 Answers3

2

Few things:

  1. You'd misspelt mystyle in x.classList.contains();
  2. Your second if-statement should be an else-if. This is because it changes the class, and checks again for the new class, thus resetting it.

<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}

.mystyle1 {
    width: 100px;
    height: 100px;
    background-color: black;
    color: coral;
    font-size: 30px;
}
</style>
</head>
<body>

<p>Click the button to change the style class from DIV.</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" class="mystyle">
I am a DIV element
</div>

<script>
function myFunction() {
    var x = document.getElementById("myDIV");

    if (x.classList.contains("mystyle")) {
        x.classList.replace("mystyle", "mystyle1");
    } else if (x.classList.contains("mystyle1")) {
        x.classList.replace("mystyle1", "mystyle");
    }
}
</script>

</body>
</html>
hjfitz
  • 399
  • 4
  • 15
  • you are right. I fixed my code up, but it still not working. When I run it there is this error: Error: { "message": "Script error.", "filename": "", "lineno": 0, "colno": 0 } I don't know what it means – David Zomada Dec 04 '17 at 12:48
1

Here is your code..

    <!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}

.mystyle1 {
    width: 100px;
    height: 100px;
    background-color: black;
    color: coral;
    font-size: 30px;
}
</style>
</head>
<body>

<p>Click the button to change the style class from DIV.</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" class="mystyle">
I am a DIV element
</div>

<script>
function myFunction() {
    var x = document.getElementById("myDIV");

    /*Here you missspelled "mystyle"*/
    if (x.classList.contains("mystyle")) {
        x.classList.replace("mystyle", "mystyle1");
    } else if (x.classList.contains("mystyle1")) {
        x.classList.replace("mystyle1", "mystyle");
    }
}
</script>

</body>
</html>
Joseph Charles
  • 656
  • 6
  • 17
1

I'm not sure which browser you're using, but I've noticed that Internet Explorer has problems with classList.replace. What worked for me was to remove and add the classes one by one.

Cheers!

user10301101
  • 11
  • 1