Why can't this copied code work?

1

Folks, I copied this code from the “Change Text with Click Events” lesson in the JSON section. Although it works on the lesson, when I copy the code to my codepen, it does not work. What is supposed to happen is that the text is supposed to change when I press the button. Yes I activated bootstrap and jQuery in the codepen settings.

html code is:

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

the Javascript code is:

$(document).ready(function() {
    $("#getMessage").on("click", function(){
      // Only change code below this line.
    $(".message").html("Here is the message");  
      // Only change code above this line.
    });
  });
2

I just copied the code and it worked for me. Could you post a link to your pen?

3

the link is:

4

In your version, you have bootstrap linked twice. You should link Jquery and Jquery IU in that order.

5

add jquery to the top of the stack in codepen

6

Thanks guys!!

That is so logical!

Gee, I could have guessed that!!!

I am being sarcastic.

7

Very Intuitive!!!

8

Im sincere about the Thanks Guys part though

1 Like