Understand the change-text-with-click-events challenge

1

Hi all, newbie to freecodecamp here. Going through the challenges and I’m up to the “JSON API and Ajax” section.
The following is the code from one of the challenges in that section. It works fine in the challenge when try it in the preview. But when I paste this code into a test.html file and open it with a browser (Chrome), the button doesn’t do anything. I’d like to understand why. Anyone able to tell me what I’m missing?

<script>
  $(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.
    });
  });
</script>


<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>
2

If you’re copying and pasting just this code into a text file and then loading that into your browser then it won’t work. You will need to link the JQuery library in your text file. Look here for more info. You would want to add the src attribute with a URL to the JQuery library to the opening script tag.

1 Like
3

Thank you. I was having the same problem trying to build the random quote generator challenge.

4