All labels value change with array values

September 2, 2022

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" class="clickable" id="Item-1">
   </div>
   <div class = "dropdown-row>
     <label for="Item-2">Item 2</label>
     <input type="checkbox" class="clickable" id="Item-2">
   </div>
   <div class = "dropdown-row>
     <label for="Item-3">Item 3</label>
     <input type="checkbox" class="clickable" id="Item-3">
   </div>
   <div class = "dropdown-row>
     <label for="Item-4">Item 4</label>
     <input type="checkbox" class="clickable" id="Item-4">
   </div>
   <div class = "dropdown-row>
     <label for="Item-5">Item 5</label>
     <input type="checkbox" class="clickable" id="Item-5">
   </div>
   <div class = "dropdown-row>
     <label for="Item-6">Item 6</label>
     <input type="checkbox" class="clickable" 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()

>Solution :

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" class="clickable" id="Item-1">
   </div>
   <div class = "dropdown-row">
     <label for="Item-2">Item 2</label>
     <input type="checkbox" class="clickable" id="Item-2">
   </div>
   <div class = "dropdown-row">
     <label for="Item-3">Item 3</label>
     <input type="checkbox" class="clickable" id="Item-3">
   </div>
   <div class = "dropdown-row">
     <label for="Item-4">Item 4</label>
     <input type="checkbox" class="clickable" id="Item-4">
   </div>
   <div class = "dropdown-row">
     <label for="Item-5">Item 5</label>
     <input type="checkbox" class="clickable" id="Item-5">
   </div>
   <div class = "dropdown-row">
     <label for="Item-6">Item 6</label>
     <input type="checkbox" class="clickable" 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