Why can't this copied code work?

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 class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message

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.

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

the link is:

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

add jquery to the top of the stack in codepen

Thanks guys!!

That is so logical!

Gee, I could have guessed that!!!

I am being sarcastic.

Very Intuitive!!!

Im sincere about the Thanks Guys part though

1 Like