JSON APIs and Ajax: Handle Click Events with JavaScript using the onclick property You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called DOMContentLoaded. Here's the code that does this:

document.addEventListener('DOMContentLoaded',function() {


You can implement event handlers that go inside of the DOMContentLoaded function. You can implement an onclick event handler which triggers when the user clicks on the element with id getMessage, by adding the following code:


Add a click event handler inside of the DOMContentLoaded function for the element with id of getMessage.

    // Add your code below this line
    document.getElementById('getMessage').onclick = function(){


    // Add your code above this line
  body {
    text-align: center;
    font-family: "Helvetica", sans-serif;
  h1 {
    font-size: 2em;
    font-weight: bold;
  .box {
    border-radius: 5px;
    background-color: #eee;
    padding: 20px 5px;
  button {
    color: white;
    background-color: #4791d0;
    border-radius: 5px;
    border: 1px solid #4791d0;
    padding: 5px 10px 8px 10px;
  button:hover {
    background-color: #0F5897;
    border: 1px solid #0F5897;
<h1>Cat Photo Finder</h1> 
<p class="message box">
  The message will go here
  <button id="getMessage">
    Get Message

results matching ""

    No results matching ""