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
Sara Masek
Front End Web Development Techdegree Student 11,513 PointsUnable 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)".
//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';
}
}
});
<!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
Unsubscribed User
Front End Web Development Techdegree Student 33,900 PointsHi 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
Front End Web Development Techdegree Student 11,513 PointsThank 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 :')
Unsubscribed User
Front End Web Development Techdegree Student 33,900 PointsHaha, 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.