Why is my addClass method not working?

Question

I'm working on an addClass method for my final project. I checked everything to make sure that there are no typos but clicking on the button doesn't change the texts color.

Here is my code:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Final Project: Home</title>
      <style type="text/css">
      .theColor {
         color: white;
      }
      </style>
   </head>
   <body>
   <script src="jquery-2.1.3.js"></script>
   <script src="script.js"></script>
   <p><input id="theButton" type="button" value="Add Class!" /></p>
   <h4 id="theText">Some Text</h4>
   </body>
</html>

and here is my jQuery code:

$('#theButton').click(function(){
    $('#theText').addClass('theColor');
});

Exactly like @Phil just said. You're calling your script before your element exists. If you want to keep it that way, atleast use **$(document).ready(function(){ /* code here */});** — kemicofa ghost, Apr 27 '15 at 00:55
The downvotes on your question are a little harsh. At least you provided all the information required so we didn't have to guess. +1 for a good question — Phil, Apr 27 '15 at 00:58

score 2 · Answer 1 · answered Apr 27 '15 at 00:55

2

You should wait until the page is loaded and only after that bind the event:

$(document).ready(function(){
  $('#theButton').click(function(){
     $('#theText').addClass('theColor');
  });
})

answered Apr 27 '15 at 00:55

potashin

42,140
11
76
100

That's only one of many options available. The duplicate question accepted answer is much more comprehensive – Phil Apr 27 '15 at 00:57
I don't remember my professor adding that. Thank you! – Chawdiee Apr 27 '15 at 00:58
@Chawdiee : You should really look through the original question, as Phil stated, there are some other options. – potashin Apr 27 '15 at 00:59

Why is my addClass method not working?

1 Answers1