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

Sherrie Jeffers
seal-mask
.a{fill-rule:evenodd;}techdegree
Sherrie Jeffers
Front End Web Development Techdegree Student 7,909 Points

i really just have no clue how to answer this

can someone please just tell me the answer because I cannot conceptualize this is any way. We haven't done this example before so I cannot literally think of an answer.

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

           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

Bella Bradbury
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bella Bradbury
Front End Web Development Techdegree Graduate 32,790 Points

Hello Sherrie!

You're on the right line of thinking, we'll need to check if the text that we input equals the index of the list item! To follow along below, I'm strictly coding the parameter for the if statement in its parenthesis.


The first step is change indexText to index. indexText refers to the input element itself and not the actual value we type in. In this case, capturing the value of our input has already been done for us! The first line of code inside of the event listener is a new variable index which captures the value of indexText and changes it from a string to a number. I hope that makes sense: indexText = the input field, index = the numerical value of the input field. Now we have:

 (index === )

Now we have to decide what we need to compare index to. We could try comparing it to the law variable, but we'll find that doesn't work for the same reason that indexText doesn't work. law once again refers to an element and isn't a numerical value. Since we're looking for a number to compare to our other number, we should turn our attention to the variable i that is defined in the for loop. This is a numerical value that serves as an index number for each of our list elements as it iterates through them. Let's add i as our comparison to index:

 (index === i)

And there you go! This challenge is very much about the data types of our available variables. We need both of our comparison values to be numbers for them to properly compare. I hope this helps!

Sherrie Jeffers
seal-mask
.a{fill-rule:evenodd;}techdegree
Sherrie Jeffers
Front End Web Development Techdegree Student 7,909 Points

Thank you so much... I think I was just tired that day because I swear I never read the part of the code that converted the string to a number already... I appreciate your help!