2018-10-10 22:03:03 +00:00
---
id: 587d7fad367417b2b2512be2
2021-02-06 04:42:36 +00:00
title: Change Text with click Events
2018-10-10 22:03:03 +00:00
challengeType: 6
2020-09-07 08:18:38 +00:00
forumTopicId: 301500
2021-01-13 02:31:00 +00:00
dashedName: change-text-with-click-events
2018-10-10 22:03:03 +00:00
---
2020-12-16 07:37:30 +00:00
# --description--
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
When the click event happens, you can use JavaScript to update an HTML element.
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
For example, when a user clicks the "Get Message" button, it changes the text of the element with the class `message` to say "Here is the message".
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
This works by adding the following code within the click event:
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
`document.getElementsByClassName('message')[0].textContent="Here is the message";`
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
# --instructions--
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
Add code inside the `onclick` event handler to change the text inside the `message` element to say "Here is the message".
2020-09-07 08:18:38 +00:00
2020-12-16 07:37:30 +00:00
# --hints--
2020-09-07 08:18:38 +00:00
2021-02-06 04:42:36 +00:00
Your code should use the `document.getElementsByClassName` method to select the element with class `message` and set its `textContent` to the given string.
2020-09-07 08:18:38 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
code.match(
/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.textContent\s*?=\s*?('|")Here is the message\2/g
)
);
2018-10-10 22:03:03 +00:00
```
2020-08-13 15:24:35 +00:00
2021-01-13 02:31:00 +00:00
# --seed--
## --seed-contents--
```html
< script >
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick = function(){
// Add your code below this line
// 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 >
```
2020-12-16 07:37:30 +00:00
# --solutions--
2020-09-07 08:18:38 +00:00
2021-01-13 02:31:00 +00:00
```html
< 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" >
The message will go here
< / p >
< p >
< button id = "getMessage" >
Get Message
< / button >
< / p >
```