Exchanging Words pt-br Explainer

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>