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?


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

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

.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!”

1 Like

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!");
1 Like

Hello,

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