Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Owa Aquino
Owa Aquino
19,277 Points
Posted by Owa Aquino
Owa Aquino
19,277 Points

Got stuck on a DOM challenge.

Hello,

I got stuck on this challenge for 2 days now and still, I don't get what I supposed to do.

I will really appreciate your help!

Thank you!

Owa

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 () {  
           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>
Nick Wilson
Nick Wilson
5,060 Points
Nick Wilson
Nick Wilson
5,060 Points

HI Owa. 

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

button.addEventListener('click', (e) => {  //add an onclick event
    const index = parseInt(indexText.value, 10); // index is equal to a value set by the user and is parsed from a string to int

    for (let i = 0; i < laws.length; i += 1) { // loop through the list items
       let law = laws[I];  // create var law and let it equal laws[increment by 1 through each list item]

       // replace 'false' with a correct test condition on the line below
       if (i === index) {  // we want to take the loop and the value of index and loop through until we find the value
           law.style.fontWeight = 'bold';
       } else {
           law.style.fontWeight = 'normal';
       }
    }
});

I'm not very good at explaining it, but this is the correct answer.

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hi Nick,

Thank you for your help. I really appreciate it.

By the way your explanation will suffice. :)

Regards,

Owa

1 Answer

don graham
don graham
13,789 Points
don graham
don graham
13,789 Points

You need to compare the value stored in the index variable to the counter variable ("i") in your for loop. 

if(i === index) {
 ...
} else
 ...
}
Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hi Don,

I didn't really thought that you can do that. This is the first time I see such comparison.

Thank you very much!

Regards,

Owa