Explicação de Troca de palavras
Objetivo deste desafio: Alterar o texto de um elemento HTML usando JavaScript.
Passo a passo da solução: O HTML contém 2 elementos h1 dentro do body. Cada um deles tem sua própria id: post e description. Estes valores id podem ser usados no JavaScript para acessar os elementos específicos.
O código inicial do JS usa document.getElementById('post') para obter o elemento h1 com a id post. Em seguida, .textContent é anexado para acessar o texto dentro desse elemento. O operador de atribuição, =, é então usado para atribuir um texto novo, 'My First Project' (Meu primeiro projeto).
O código JS similar pode ser usado para alterar o texto do elemento description. Comece usando document.getElementById('description') para acessar o elemento description. Em seguida, anexe .textContent a isso. Agora é possível atribuir uma nova string ao conteúdo do texto do elemento. Por exemplo: 'I made a webpage'(Eu fiz um site da web).
Solução do código de exemplo:
(Toque abaixo 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;
}
Conceitos de JavaScript: document.getElementById(), .textContent, Expressão de atribuição =
Conceitos de HTML: Elemento HTML, <html>, <body>, id, <h1>