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

Dennis Guan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dennis Guan
Front End Web Development Techdegree Graduate 15,103 Points
Posted by Dennis Guan
.a{fill-rule:evenodd;}techdegree seal-36
Dennis Guan
Front End Web Development Techdegree Graduate 15,103 Points

DOM Scripting By example

last challenge task: //replace 'false' with a correct test condition on the line below I enter: if(index<=2)
the preview looks ok, when I enter 0, 1 or 2. Am I missing something?

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 (index<=2) {

           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

Michael Kristensen
.a{fill-rule:evenodd;}techdegree seal-36
Michael Kristensen
Full Stack JavaScript Techdegree Graduate 26,251 Points

If you use (index <= 2) you will find any cases where there the current user input (index) is less than or equals to 2, so all of Newton's Laws of Motion would be highlighted, in all scenarios where the user inputs 2 or below. By using (index === i) you are specifically looking for all cases where the current user input (index) matches with whatever value is currently being iterated through in the for-loop (i), highlighting only the one that match the user input.