Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript DOM Scripting By Example Editing and Filtering Names Fix DOM Manipulation Code

Travers Geoffray
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travers Geoffray
Front End Web Development Techdegree Graduate 20,326 Points

Completely lost on this challenge question, would someone be able to help steer me in the right direction?

Have trouble getting started here. Also. is the button in this case supposed to add numbers and bold the whole text or just the numbers?

app.js
const laws = document.getElementsByTagName('li');
const indexText = document.getElementById('boldIndex');
const button = document.getElementById('embolden');

button.addEventListener('click', (e) => {
    const index = parseInt(indexText.value, 10);

    for (let i = 0; i < laws.length; i += 1) {
       let law = laws[i];

       // replace 'false' with a correct test condition on the line below
       if (false) {

           law.style.fontWeight = 'bold';
       } else {
           law.style.fontWeight = 'normal';
       }
    }
});
index.html
<!DOCTYPE html>
<html>
<head>
  <title>Newton's Laws</title>
</head>
<body>
  <h1>Newton's Laws of Motion</h1>
  <ul>
    <li>An object in motion tends to stay in motion, unless acted on by an outside force.</li>
    <li>Acceleration is dependent on the forces acting upon an object and the mass of the object.</li>
    <li>For every action, there is an equal and opposite reaction.</li>
  </ul>
  <input type="text" id="boldIndex">
  <button id="embolden">Embolden</button>
  <script src="app.js"></script>
</body>
</html>

1 Answer

Ryan Groom
Ryan Groom
18,616 Points

Travers Geoffray Your code should look like this:

       // replace 'false' with a correct test condition on the line below
       if (indexText.value == i) {

           law.style.fontWeight = 'bold';
       } else {
           law.style.fontWeight = 'normal';
       }

In this "if" statement, indexText.value is representative of the number that you enter into the input field. The function runs through a loop for every list item you have on the page and the "i" in the "if" statement is representative of the current iteration of the loop you are on. So on the first iteration i = 0 and where it says law = laws[i], it is setting the variable law equal to laws[0] which is the first instance of a list item (all your list items were stored in an array referenced by the variable "laws" if you look at the constant declared at the top of your JS file). So if your inputs value matches the current iteration of the loop that you're on, then it sets the font weight of that specific list item to bold. I hope this makes sense, if not let me know what you need cleared up!