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

Sara Masek
seal-mask
.a{fill-rule:evenodd;}techdegree
Sara Masek
Front End Web Development Techdegree Student 11,218 Points

Unable to access index of each element for a conditional statement

Hi all, I've been stuck on this for a while - in this code I have to match the indexes of the three <li> with the input value. In other words when a user types in a 0, 1, or 2, and presses the "embolden" button, the <li> with the matching index should become bold. It seems simple enough however I can't figure out how to access each index and compare it to what's in the input field. I tried storing the indexes in a new variable using the law variable, since the for loop was already taking care of looping through each one. The console error keeps coming back as "Undefined: laws.indexOf(law)".

app.js
//the list objects
const laws = document.getElementsByTagName('li');
//the input
const indexText = document.getElementById('boldIndex');
//the button
const button = document.getElementById('embolden');

button.addEventListener('click', (e) => {
  //let index equal the value typed into the input field (in the form of a whole number)
    const index = parseInt(indexText.value, 10);

    for (let i = 0; i < laws.length; i += 1) {
       let law = laws[i];
       let lawIndex = laws.indexOf(law);
       // replace 'false' with a correct test condition on the line below
       if (index.value === lawIndex){

           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

Hi Sara,

funny, i am just doing this course, finished this exercise and looked at community questions for a break and see your question.... :-)

The solution is actually very simple:

You just want to compare if index is equal to i.

Does that make sense?

Happy coding and blessings from Berlin, Nils

Sara Masek
seal-mask
.a{fill-rule:evenodd;}techdegree
Sara Masek
Front End Web Development Techdegree Student 11,218 Points

Thank you so much Nils! I had a feeling I was making it more complicated than it needed to be! It makes sense since i stores the index value, it's just that I've NEVER seen an i from a for loop compared in a conditional like that, so the thought of using it never even crossed my mind :')

Haha, yes, it's often much simpler than we think, i know that quite well.... :-) And actually, the i in for loops is used quite a lot for many different purposes. But to be honest, me too I had not seen it being used like here as well.