I am not sure what the 10 is in the index variable. I am trying to use the index variable in the law(list items)

Question

I cant seem to us the law and the input value from index (input value) to select the items in law that were selected with the input.

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 (law[index]){
           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>

Answer 1 · 2018-11-17T00:30:36Z

November 17, 2018 12:30am

Hi Edmundo,

To answer your first question, what the 10 represents, let's look at the MDN documentation:

parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

We are dealing with ordinary decimal numbers (at least as far as we can tell) so we want to use base 10.

As for your condition not working, let's think about what the code is doing and decide what sort of condition would suit the code as structured.

We know that laws is a collection of list items. We know that the user is going to submit their choice of index, and we'll have that value as index. We know that the event listener, when triggered by clicking, will loop as many times as there are laws, each time providing a value (i) that corresponds to the current law's index.

We want to our condition to fire when the index given to us by the user is equal to the index of that law.

Remember that the condition has to evaluate to a boolean (i.e., true or false). As it stands, your condition law[index] evaluates to a list item (the particular law that has the index of index) not a boolean. JavaScript will coerce your value into a boolean based on its 'truthiness'. Since none of the list items are false, 0, "", undefined, or NaN, the condition will always evaluate to true and every law will be turned bold.

Hope that clears everything up for you,

Cheers

Alex

Welcome to the Treehouse Community

Looking to learn something new?

Edmundo Ruiz

Edmundo Ruiz

I am not sure what the 10 is in the index variable. I am trying to use the index variable in the law(list items)

1 Answer

Alex Koumparos

Alex Koumparos