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 MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

Three list item

I actually tried many method to the condition, but i still cant figure out, which one to use it? So , i tried index == law.indexOf(), or index == law and so on.

But all doesnt work, so hope someone help me out, thank you so much!!

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>

2 Answers

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

You need to check if the current loop iteration which is represented by ā€œiā€ is equal to the index stored in the index variable. the loop runs through the array of the list items, if u want to bold the second list item, u enter 1 on the input >>> the loop starts to run, first the i is equal to 0, and u entered 1 so the list item is still normal, in the second iteration ā€œiā€ is equal to 1 and u entered 1 so the second list item get bolded.

MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

I know the array list index. But i just dont know why the result is index == i, but not index == law.indexOf()?

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

because the variable "law" is holding the array of the list items(li) why would u want to compare them?\ instead the variable "index" is holding the user's input value and u compare it with the "i" variable beacause "i" reprsenting the current iteration the loop is on.

MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

Sorry, for the late reply, i understand it, thank you.