Exchanging Words explainer

#1

The aim of this puzzle: Change the text of an HTML element using JavaScript.

Walkthrough of the solution: The HTML contains 2 h1 elements inside the body. They each have their own id: post and description. These id values can be used in the JavaScript to access the specific elements.

The JS starter code uses document.getElementById('post') to get the h1 element with the post id. Then, .textContent is attached to access the text inside that element. The assignment operator, =, is then used to assign some new text, 'My First Project'.

Similar JS code can be used to change the text of the description element. Start by using document.getElementById('description') to access the description element. Then attach .textContent to that. Now, you can assign a new string to the element’s text content. For example: 'I made a webpage'.

Sample code solution:
(Tap below to reveal)
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;
}

JavaScript Concepts: document.getElementById(), .textContent, Assignment Expression =
HTML Concepts: HTML element, <html>, <body>, id, <h1>

#2