I'm making background selector in site menu, It will change backgroundImage when user clicks on spec. image (that triggers radio button). I want to do it using querySelectorAll(".selected"), loop it and set addEventListener(click, ..) get index(or id, value) and set backgroundImage using background_list array.

var background_list = ["/images/air-balloon.jpg","/images/mary-christmas.jpg","/images/mountain.jpg","/images/panorama.jpg","/images/plants.jpg","/images/sunset-mountain.jpg","/images/underwater-star.jpg","/images/vinyl-player.jpg"...]

<div class="dropdown-background-container">

    <div>
        <input                  
            type="radio"
            id="image-1"
            class="select"
            value="1"
        >
        <label for="image-1">
            <img src="/images/air-balloon-small.jpg" alt="Air Balloons">
        </label>
    </div>
    <div>
        <input
            type="radio"
            id="image-2"
            class="select"
            value="2"
        >
        <label for="image-2">
            <img src="/images/mary-christmas-small.jpg" alt="Mary Christmas">
        </label>
    </div>

For example I have dozens of images

document.querySelectorAll(".select").forEach( item => {
      item.addEventListener('click', arrow => {
      document.body.style.backgroundImage = `url("${background_list[index]}")`
    })})

Is there any way to find triggered index(id or value)? And how would you implement code for this, what's easiest solution? I'm beginner in JS

I'm making background selector in site menu, It will change backgroundImage when user clicks on spec. image (that triggers radio button). I want to do it using querySelectorAll(".selected"), loop it and set addEventListener(click, ..) get index(or id, value) and set backgroundImage using background_list array.

var background_list = ["/images/air-balloon.jpg","/images/mary-christmas.jpg","/images/mountain.jpg","/images/panorama.jpg","/images/plants.jpg","/images/sunset-mountain.jpg","/images/underwater-star.jpg","/images/vinyl-player.jpg"...]

<div class="dropdown-background-container">

    <div>
        <input                  
            type="radio"
            id="image-1"
            class="select"
            value="1"
        >
        <label for="image-1">
            <img src="/images/air-balloon-small.jpg" alt="Air Balloons">
        </label>
    </div>
    <div>
        <input
            type="radio"
            id="image-2"
            class="select"
            value="2"
        >
        <label for="image-2">
            <img src="/images/mary-christmas-small.jpg" alt="Mary Christmas">
        </label>
    </div>

For example I have dozens of images

document.querySelectorAll(".select").forEach( item => {
      item.addEventListener('click', arrow => {
      document.body.style.backgroundImage = `url("${background_list[index]}")`
    })})

Is there any way to find triggered index(id or value)? And how would you implement code for this, what's easiest solution? I'm beginner in JS

• javascript
• html
• css
• addeventlistener
• selectors-api

Share Improve this question Follow edited Dec 2, 2020 at 23:22 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Dec 2, 2020 at 23:10 John DinJohn Din 5311 silver badge66 bronze badges 1

• 4 forEach already provides this for you as its second argument: document.querySelectorAll(".select").forEach((item, index) => { ... }). See the always amazing docs on MDN for more info: developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – somethinghere Commented Dec 2, 2020 at 23:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can find the index of an element in an array while using these array iteration functions by adding extra parameters (index is the second parameter with forEach):

document.querySelectorAll(".select").forEach((item, index) => { // here
      item.addEventListener('click', arrow => {
      document.body.style.backgroundImage = `url("${background_list[index]}")`
})})