Class Elements Not All Working When .addClass and .removeClass Javascript Is Implemented For Button Function

JavaScript
1

Hi folks!
I’m trying to get a button entitled “Start-Resume” to remove a class and add a class, but for some reason all the attributes of the class being added are not being implemented in the final result, such as the color of the text, which should be “red”, rather than “#680b19”.

Here’s my code:

JavaScript:
`
$(document).ready(function(){

$(".start-resume").click(function(){
$(’.time-display’).removeClass(“on”);
$(’.time-display’).addClass(“on”).html(“Ready?”);
});

});
`

HTML Code:
<div class="count-display"> <div id="number">8888888888888888</div> </div>
…
`
#number{
font-size: 55px;
line-height: 50px;
text-align: center;
margin: auto;
font-family: digital-7;
color: #680b19;
}

`

CSS Code:
`
.on{
color: red;
font-size: 55px;
font-family: digital-7;
line-height: 1.85em;
text-align: center;
}

`
What am I doing wrong??? Thanks in advance for your help!

3

@alhazen1, I’m confused!

4

I removed my earlier post because I think what I was telling you was wrong. If you can post more of your code or even better a link to a codepen I’ll look at it when I get off work in about an hour or so. Probably by then someone else will have looked at it and found out why you are code is not working

5

Hey, ok!
I fixed it by adding !important to the block of css code below:
.on{ color: red !important; font-size: 55px; font-family: digital-7; line-height: 1.85em; text-align: center; }

1 Like