JSON APIs and AJAX - Handle Click Events with JavaScript using the onclick property

Tell us what’s happening:
I tried running this code on codepen but the button does not appear as a link. however, it only works on freecodecamp tests

any suggestion to fix it will be helpful

Your code so far

<script>
document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('getMessage').onclick = function () {
        console.log("Clicked")
    }

    // Add your code above this line
  });
</script>

<style>
  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;
  }
</style>
<h1>Cat Photo Finder</h1>
<p class="message box">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: JSON APIs and AJAX - Handle Click Events with JavaScript using the onclick property

Link to the challenge:

Your code is fine, If you want a Link not a button just use the <a></a> element instead of the button element or style your button element to make it look like a link although that will be unnecessary

Thank you for your quick reply,
what I was trying to say is that when I try to click the button on codepen it does not display “clicked” but it display’s clicked on freecodecamp test.

Your code runs perfectly my friend just go to codepen add your code there then look at the bottom of the page and click the button that says console and you will find the word clicked there

Thank you so much!
I just saw that
I was hoping to see it on the html body, just the way it displays on the tests.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.