2021-02-06 04:42:36 +00:00
---
id: 587d7fad367417b2b2512be2
2021-10-19 14:08:08 -07:00
title: Cambia texto con eventos de clic
2021-02-06 04:42:36 +00:00
challengeType: 6
forumTopicId: 301500
dashedName: change-text-with-click-events
---
# --description--
2021-10-19 14:08:08 -07:00
Cuando el evento de clic sucede, puedes utilizar JavaScript para actualizar un elemento HTML.
2021-02-06 04:42:36 +00:00
2021-10-19 14:08:08 -07:00
Por ejemplo, cuando un usuario hace clic en el botón `Get Message` , cambia el texto del elemento con la clase `message` para decir `Here is the message` .
2021-02-06 04:42:36 +00:00
2021-10-19 14:08:08 -07:00
Esto funciona agregando el siguiente código dentro del evento clic:
2021-02-06 04:42:36 +00:00
2021-07-09 21:23:54 -07:00
```js
document.getElementsByClassName('message')[0].textContent="Here is the message";
```
2021-02-06 04:42:36 +00:00
# --instructions--
2021-10-19 14:08:08 -07:00
Añade código dentro del controlador de eventos `onclick` para cambiar el texto dentro del elemento `message` para decir `Here is the message` .
2021-02-06 04:42:36 +00:00
# --hints--
2021-10-19 14:08:08 -07:00
Debes utilizar el método `document.getElementsByClassName` para seleccionar todos los elementos con la clase `message` para asignarles `textContent` a la cadena dada.
2021-02-06 04:42:36 +00:00
```js
assert(
code.match(
/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.textContent\s*?=\s*?('|")Here is the message\2/g
)
);
```
# --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 >
```
# --solutions--
```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 >
```