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

Dmitry Ignatyev
Dmitry Ignatyev
9,877 Points
Posted by Dmitry Ignatyev
Dmitry Ignatyev
9,877 Points

DOM Scripting By Example Challenge

I am not understand, how to solve the problem...

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>

4 Answers

Steven Parker
Steven Parker
229,787 Points
Steven Parker
Steven Parker
229,787 Points

You want to make the item that was selected bold.

So instead of "false", you would put a conditional expression that compares the selected index to the current loop variable value. The selected index has already been conveniently converted to a number and stored in the variable named "index" by the code a few lines up.

Dmitry Ignatyev
Dmitry Ignatyev
9,877 Points
Dmitry Ignatyev
Dmitry Ignatyev
9,877 Points

Thank you so much. It is more difficult to understand the task in English than to implement it on JS. if (index === i) of course =)

Steven Parker
Steven Parker
229,787 Points
Steven Parker
Steven Parker
229,787 Points

I do have a lot of sympathy for students who deal with a different language at the same time while learning programming!

Jenn Chu
PLUS
Jenn Chu
Courses Plus Student 18,400 Points
Jenn Chu
Jenn Chu
Courses Plus Student 18,400 Points

if you click to view the webpage, you will see that the user will be choosing list item 1 -3 to make the line bold.

For your conditional statement, look at how the loop is cycling through the list items... so when the list item line number is the same as the number the user chooses to make bold, then it will become 'bold', or else it would stay 'normal'.

try;

if (i === index){...}

Dmitry Ignatyev
Dmitry Ignatyev
9,877 Points
Dmitry Ignatyev
Dmitry Ignatyev
9,877 Points

Ok, but in condition says: We want to be able to enter a 0, 1 or 2 in the text field... Which of these indexes must be returned true in the condition? And why we have 3 index and only two ways after condition? I went through all the combinations. This does not work.

Steven Parker
Steven Parker
229,787 Points
Steven Parker
Steven Parker
229,787 Points

You user doesn't pick the state, but which item to change the state of. There are three bulleted items in the list.