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

Posted by Fredy-Edwin Esse
.a{fill-rule:evenodd;}techdegree
Fredy-Edwin Esse
Front End Web Development Techdegree Student 14,550 Points

What is the right condition for this if statement?

I've tried everything I know and I can't understand what is the right condition for this if statement? Anyone?

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

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

:point_right: Don't over-think this one, it's quite simple.

All you need to do here is compare the current loop index with the value that the user has placed in the input box. And to make it easy, the challenge has already created a variable named index and assigned it with the numeric value produced by converting the input field.

You just need to test if the loop index is equal to the user's "index".

Fredy-Edwin Esse
.a{fill-rule:evenodd;}techdegree
Fredy-Edwin Esse
Front End Web Development Techdegree Student 14,550 Points

Steven, I understood the problem and I agree, it is (or at least seems) simple, but I can't seem to make the condition work... As I understand you take the const index and compare it with the loop that's indexing through the list items and if they match it'll set the appropriate font weight.

What's wrong with this condition then? if (index === law) {

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

law is the current element, not the loop index (and not a number).

The loop index is the variable declared inside the for statement, and is used to select law from laws, which is i.

Fredy-Edwin Esse
.a{fill-rule:evenodd;}techdegree
Fredy-Edwin Esse
Front End Web Development Techdegree Student 14,550 Points

Ok, I finally got it :) Thank you for your help!