All labels value change with array values-CodePudding

So, I have a dropdown list with checkboxes

<div id = "dropdown" class ="dropdown">
   <div class = "dropdown-row">
     <label for="Item-1">Item 1</label>
     <input type="checkbox"  id="Item-1">
   </div>
   <div class = "dropdown-row">
     <label for="Item-2">Item 2</label>
     <input type="checkbox"  id="Item-2">
   </div>
   <div class = "dropdown-row">
     <label for="Item-3">Item 3</label>
     <input type="checkbox"  id="Item-3">
   </div>
   <div class = "dropdown-row">
     <label for="Item-4">Item 4</label>
     <input type="checkbox"  id="Item-4">
   </div>
   <div class = "dropdown-row">
     <label for="Item-5">Item 5</label>
     <input type="checkbox"  id="Item-5">
   </div>
   <div class = "dropdown-row">
     <label for="Item-6">Item 6</label>
     <input type="checkbox"  id="Item-6">
   </div>
</div>

Also I have an array:

const niches = ["Producer", "Filmmaker", "Manager", "Model", "Musican", "Artist"]

How can I change all labels text with array values ?

I tried something like this:

const items = document.getElementsByTagName("label")
function setLabel () {
    for (let i = 0; i < niches.length; i  ) {
        items.innerHTML = niches[i]
    }
}
setLabel()

CodePudding user response：

Fixed a few things in your code, here for example in your html you forgot to close your class with ""

<div id = "dropdown" class ="dropdown">
   <div class = "dropdown-row">
     <label for="Item-1">Item 1</label>
     <input type="checkbox"  id="Item-1">
   </div>
   <div class = "dropdown-row">
     <label for="Item-2">Item 2</label>
     <input type="checkbox"  id="Item-2">
   </div>
   <div class = "dropdown-row">
     <label for="Item-3">Item 3</label>
     <input type="checkbox"  id="Item-3">
   </div>
   <div class = "dropdown-row">
     <label for="Item-4">Item 4</label>
     <input type="checkbox"  id="Item-4">
   </div>
   <div class = "dropdown-row">
     <label for="Item-5">Item 5</label>
     <input type="checkbox"  id="Item-5">
   </div>
   <div class = "dropdown-row">
     <label for="Item-6">Item 6</label>
     <input type="checkbox"  id="Item-6">
   </div>
</div>

The example you gave had a few mistakes like this one

<div class = "dropdown-row> <!-- you didnt close double quotes here -->

And for your function

const niches = ["Producer", "Filmmaker", "Manager", "Model", "Musican", "Artist"];

const items = document.getElementsByTagName("label")

function setLabel () {
    for (let i = 0; i < niches.length; i  ) {
        items[i].innerHTML = niches[i]
    }
}
setLabel()

You have several values in items as you have label tags and you want to access them all within your for loop so you only needed to add the index to you items const so it will go from this items.innerHTML = niches[i] to this items[i].innerHTML = niches[i] that way you can loop thru both variables

CodePudding user response：

You are not accessing an index in items so you try to set a single Value to a collection of elements.

When you add the index to items your code works like a charm.

function setLabel () {
    for (let i = 0; i < niches.length; i  ) {
// when you access items with i as well item1 gets niche1 and so on
        items[i].innerHTML = niches[i]
    }
}

https://jsfiddle.net/Lt25r7xu/