Change Text Click Event

Change Text Click Event


So our page loads first, then the script loads awaiting user input?

So we passed the id user input (event = “click”) to the function and it is then executed user side? The .ready (Function() is just in hibernation until the user does whatever?

  $(document).ready(function() {
    $("#getMessage").on("click", function(){
      // Only change code below this line.
      $(".message").html("I love the connection!");
      // Only change code above this line.

<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


.ready() waits for the DOM to load before the content within it is executed. For more info read here:

.click() is an event listener that is attached to the #getMessage element. when #gotMessage is clicked on, the anonymous function will run. the anonymous function calls the .html function on the .message element setting its content to “I love the connection!”


Well, if it’s not working you might need to check the spaces you’ve between e.g id = "getMessage".


$("#message").html(“I love the connection!”);

You need to use the id of the text on the html your change.

<h1 id = "message"></h1>
$("#message").html("I love the connection!");



.message refer to message in HTML well. So is message name of well?

I even changed the message to message in both HTML & Jquery and the code works.