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

Shreemangal Sethi
seal-mask
.a{fill-rule:evenodd;}techdegree
Shreemangal Sethi
Full Stack JavaScript Techdegree Student 15,249 Points

I am not sure which element to target. According to me we need to target the button element.

I had kept the condition in the if statement as (button.textContent === 'Embolden') but it does not work. Can i please get some help.

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 (true) {

           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

While the button has the event listener, the challenge is expecting you to compare the value in the TextField "boldIndex" to the index of each <li>. You don't need to use the button's text.

For example, if the value in the TextField is "0", then when the button is clicked, the <li> containing "An object in motion tends to stay in motion, unless acted on by an outside force." should become bold, and the other list items should have a normal font weight. if the value in the TextField is "2", then when the button is clicked, the <li> containing "For every action, there is an equal and opposite reaction." should become bold, and the other list items should have a normal font weight. If the value in the TextField is not "0", "1", or "2", then all the list items should have a normal font weight.

In the line const index = parseInt(indexText.value, 10);, the value of index becomes either an integer or NaN. You can then compare the value of index to indices of the <li>s in the NodeList laws.

Hi Shreemangal,

I am also stuck on this problem. The if condition I came up with is the following:

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

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

});

.... which doesn't work. Did you find the solution?

The challenge is expecting a number to be passed into the input element, such as 0, 1, or 2.

If you type 0 into the input box, indexText will be <input type="text" id="boldIndex" value="0"> and laws[0] is <li>An object in motion tends to stay in motion, unless acted on by an outside force.</li>. Since the value attribute of inputText converted to an integer is the same as the index of the list item, the challenge expects the text of that list item to become bold.

Replacing false with index === i will pass the challenge.

If the challenge expected a string to be typed in the input element, such as An object in motion tends to stay in motion, unless acted on by an outside force., you could replace false with indexText.value === laws[i].textContent to compare the strings.