Please help me figure out Onclick in the first lesson

I am starting the first lesson for JSON APIs and Ajax : Handle Click Events with JavaScript using the onclick property

I can’t figure out what I am doing wrong, I’m sure it’s simple but I’ve looked everywhere and tried everything I could think of so if anyone can explain to me what I’m missing in my code I would GREATLY appreciate it.

document.addEventListener('DOMContentLoaded', function(){
  // Add your code below this line

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36.

Challenge: Handle Click Events with JavaScript using the onclick property

Link to the challenge:

Hey there @streetlightkids,

You got the document.getElementById part correct, but you cannot use the getMessage. You never declared getMessage as a variable. Usually, in JavaScript, they are connected using a . (dot).

Here’s an example:

document.getElementById("element-id").onclick = function() {};

You can still get away with your way, but you have to declare your variable first. This is not the challenge asks you, but this is just to help you understand:

var element = document.getElementById("element-id");

element.onclick = function() {};
1 Like

A champion!! Thank you very much!!!

1 Like