Exchanging Words es-419 Explainer

Explicador de Intercambio de palabras

Objetivo de este acertijo: Cambiar el texto de un elemento HTML usando JavaScript.

Tutorial de la solución: El HTML contiene 2 elementos h1 dentro de body. Cada uno tiene su propia id: post y description. Estos valores de id se pueden usar en JavaScript para acceder a elementos específicos.

El código de inicio de JS usa document.getElementById('post') para obtener el elemento h1 con la id post. Luego, .textContent se anexa para acceder al texto dentro de ese elemento. Luego, el operador de asignación =, se usa para asignar texto nuevo, 'My First Project'.

Se puede usar un código de JS similar para cambiar el texto del elemento description. Comienza usando document.getElementById('description') para acceder al elemento description. Luego, anéxale .textContent. Ahora puedes asignar un nuevo string al contenido del texto del elemento. Por ejemplo: 'I made a webpage'.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)
JS

document.getElementById('post').textContent = 'My First Project';
document.getElementById('description').textContent = 'I made a webpage';
HTML
<html>
  <body>
    <h1 id='post'>Title</h1>
    <h1 id='description'>Description goes here</h1>
  </body>
</html>
CSS
body {
  background-color: navy;
}

h1 {
  color: white;
}

#description {
  color: gray;
}

Conceptos de JavaScript: document.getElementById(), .textContent, expresión de asignación =
Conceptos de HTML: Elemento HTML, <html>, <body>, id, <h1>