# freeCodeCamp Challenge Guide: Change Text with click Events

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-change-text-with-click-events/301500>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [August 3, 2019, 1:09pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-change-text-with-click-events/301500 "2019-08-03T13:09:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 3, 2019, 1:09pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-change-text-with-click-events/301500/1 "2019-08-03T13:09:12Z")

</div>

# [Change Text with click Events](https://www.freecodecamp.org/learn/data-visualization/json-apis-and-ajax/change-text-with-click-events)

* * *

> **Solution (Click to show/hide)**
>
> ```auto
> <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"
> 
> // 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>
> 
> ```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 8, 2025, 3:58pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-change-text-with-click-events/301500/2 "2025-01-08T15:58:12Z")

</div>