Anyone know why this works?

just wondering why this solution passes the test when there is no ‘message’ class in the html document. Also what is the [0] for? thanks

  **Your code so far**

<script>
document.addEventListener('DOMContentLoaded', function(){
  document.getElementById('getMessage').onclick = function(){
    // Add your code below this line

document.getElementsByClassName('message')[0].textContent="Here is the message";
                                        //^this??
    // 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/89.0.4389.114 Safari/537.36.

Challenge: Change Text with click Events

Link to the challenge:

That element has two classes: message and box. Any space-separated strings are treated as separate classes.

And in an array, [0] indicates the first element in that array. And getElementsByClassName returns an object that works much like an array. So the query is returning any number of elements, but only operating on the first one.

wow this is a new low for me…

Not at all, it’s a learning curve. Keep it going!