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>