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
Shreemangal Sethi
Full Stack JavaScript Techdegree Student 15,552 PointsI 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.
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';
}
}
});
<!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
jb30
44,807 PointsWhile 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.
Carmen Chow
Full Stack JavaScript Techdegree Student 578 PointsHi 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?
jb30
44,807 PointsThe 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.