[solved] jQuery won't change CSS. jQuery not targeting btn elements

#1

-I think I figured out my javaScript problem.

  • I don’t have any external javaScript added in the Pen setings. But then I added jQuery (didn’t work), and thenjQuery UI (didn’t work), and Bootstrap4 in the JS settings. I tried them standing alone and in different combinations. So I don’t know.
  • I’ve tried targeting by type (button), by class (".btn-lg"), and by id $("#xxxButton").
    lolol I bet it’s somethin simple

https://codepen.io/AmericanPi/pen/KyzYwr

#2

you need to load the Animate.css library … if you were doing this for one of the lessons on freecodecamp they loaded the library in the background for the lesson … if you want to try it on codepen you need to load the library yourself in codepen.
I just did it and it worked … click settings … click CSS and down at bottom in quick add type Animate.css and add … it will work then

1 Like
#3

tx man.

  • do you know why it won’t bounce and shake. only one or the other will work.
  • also my jQuery won’t change css. I looked for that pluggin but did not find it.
#4

Ok messed around a bit and found i could do it by adding a setTimeout with a function that removed the first addClass after shake and then addClass bounce and it worked

$(document).ready(function() {
    $("h1").addClass("animated bounce");
    $("button").addClass("animated shake");
  
  setTimeout(function() {
     $("button").removeClass("animated shake");
     $("button").addClass("animated bounce");
  },1000);
  
});

your jQuery will change CSS
$(“button”).css(“background-color”, “red”); works
you had $(“button”).css(“background-color** ;**”, “text-primary”); so you had extra : … as for text-primary is this a color … sounds like something from bootstrap and maybe thats why it dosent work

#5

That timeout trickery is pretty cool man.
And thanks for pointing out my JavaScript error.

@JohnL3 is my new hero.

#6

Oh man my portfolio is hopping along now!
I might even fin ish it this week lol.

#7

I just spent a long, long time looking for the solution to this. Thank you very much.