Set src attribute of an html collection(img) from an array of paths as values to set on each img using ES6 pure Javascript?

Question

I have an array of src values like [path1, path2, path3] and an html collection the same array length as arr value. So I want to pass each value to set src of the html elements. How can I do? I tried forEach, for Of, map, but it still either all elements in the same path or just one (the first element) setted.

//My code now
<img alt='first-in-collection'>
<img alt='second-in-collection'>
<img alt='third-in-collection'>

//The variable
let arr = ['path1', 'path2', 'path3']

//Expected result 
<img src='path1' alt='first-in-collection'>
<img src='path2' alt='second-in-collection'>
<img src='path3' alt='third-in-collection'>

My Running Code Link

Please show any attempt that you have made to solve this issue yourself. You are expected to have made an attempt that we can then help you debug. meta.stackoverflow.com/questions/261592/… Also review How to Ask — Taplar
– Taplar, Commented May 25, 2020 at 20:11
How are you creating the collection of the DOM elements that your code will work with? — Bergi
– Bergi, Commented May 25, 2020 at 21:40

Ankit Chaudhary · Accepted Answer · 2020-05-26 09:05:16Z

You don't need to run loops on both image and path arrays. Run the loop on any one array. Keep incrementing the iterator count and set the src of current iterator indexed image.

let arr = ['path1', 'path2', 'path3'];\
// get all images
let img = document.getElementsByClassName('img-thumbnail')
// initialize iterator with 0    
let i=0;     
for(let el of arr){
       // set attribute of corresponding image
        img[i++].setAttribute('src', el)
        
    }

<div class="col-8">
    <div class="row produit-desc-lense">
        <div class="col-4 text-center border-bottom">
            <img class="img-fluid rounded img-thumbnail" alt="/">
            <h5>caméra 2</h5>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <p></p>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <select id="selectNumber">
                <option>Choose a number</option>
            </select>
        </div>
    </div><div class="row produit-desc-lense">
        <div class="col-4 text-center border-bottom">
            <img class="img-fluid rounded img-thumbnail" alt="/">
            <h5>caméra 2</h5>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <p></p>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <select id="selectNumber">
                <option>Choose a number</option>
            </select>
        </div>
    </div><div class="row produit-desc-lense">
        <div class="col-4 text-center border-bottom">
            <img class="img-fluid rounded img-thumbnail" alt="/">
            <h5>caméra 2</h5>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <p></p>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <select id="selectNumber">
                <option>Choose a number</option>
            </select>
        </div>
    </div>
    
</div>

Thank you very much for your answer, I was stuck with a similar problem.

Collectives™ on Stack Overflow

Set src attribute of an html collection(img) from an array of paths as values to set on each img using ES6 pure Javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related