How can I get a array from a JS for loop?

Question

There are two parts of HTML, i want get the hrefs from first part then use them for img src in the second part.

const links = document.getElementsByClassName('myImg');	
for (let i=0; i <links.length; i++) {
    let classValue = [ ];
    classValue += links[i].getAttribute('href');

	myDiv = document.getElementsByClassName('myDiv');
	for (let i=0; i<myDiv.length; i++) { 
	    const myImg = document.createElement("IMG");
	    myImg.setAttribute('src', 'classValue[i]');
	    myDiv[i].appendChild(myImg);
	}
}

<a class="myImg" href="1.jpg"> 1.jpg </a>
<a class="myImg" href="2.jpg"> 2.jpg </a>
<a class="myImg" href="3.jpg"> 3.jpg </a>

<div class="myDiv"> </div>
<div class="myDiv"> </div>
<div class="myDiv"> </div>

This code doesn’t work.

I think I don't understand JS for loop well, the result i get from first part - "classValue", looks not right.

I think "classValue" is not a array, so can't use it in second part.

How can i get a array for the loop?

Can someone explain this for me.

What was the intention of classValue += links[i].getAttribute('href');? To add a string to the array? — PM 77-1
– PM 77-1, Commented Dec 12, 2019 at 23:36

Ori Drori · Accepted Answer · 2019-12-12 23:42:36Z

Use document.querySelectorAll() to get a NodeList of .myDiv elements. Do the same for .myImg, and iterate the NodeList with NodeList.forEach(). Take the href from each link, generate the img tag, and append it the .myDiv with the same index:

const myDiv = document.querySelectorAll('.myDiv');
const links = document.querySelectorAll('.myImg')
  .forEach((link, i) => {
    const myImg = document.createElement("IMG");
    myImg.setAttribute('src', link.getAttribute('href'));
    myDiv[i].appendChild(myImg);
  });

<a class="myImg" href="https://picsum.photos/100?1"> 1.jpg </a>
<a class="myImg" href="https://picsum.photos/100?2"> 2.jpg </a>
<a class="myImg" href="https://picsum.photos/100?3"> 3.jpg </a>

<div class="myDiv"> </div>
<div class="myDiv"> </div>
<div class="myDiv"> </div>

How to fix your code (see comments):

const links = document.getElementsByClassName('myImg');
const classValue = []; // define classValue outside of the loop, so you won't re-init it

for (let i = 0; i < links.length; i++) {
  classValue.push(links[i].getAttribute('href')); // push the items to classValue instead of concating them as strings.
}

// moved myDiv's handling outside of the links loop
const myDiv = document.getElementsByClassName('myDiv');
for (let i = 0; i < myDiv.length; i++) {
  const myImg = document.createElement("IMG");
  myImg.setAttribute('src', classValue[i]); // get the src from classValue
  myDiv[i].appendChild(myImg);
}

<a class="myImg" href="https://picsum.photos/100?1"> 1.jpg </a>
<a class="myImg" href="https://picsum.photos/100?2"> 2.jpg </a>
<a class="myImg" href="https://picsum.photos/100?3"> 3.jpg </a>
<div class="myDiv"> </div>
<div class="myDiv"> </div>
<div class="myDiv"> </div>

Thank you very much for your detailed explanation and the example, it's very useful.

Shoni Nemavhidi · Accepted Answer · 2021-03-27 08:15:47Z

0

You have declared an array called classValue, to add an element to it you will have to do it as follows:

let myVariable = links[i].getAttribute('href');
classValue.push(myVariable);

although I am not too certain about this:

 links[i].getAttribute('href');

and then you can either loop through the array later using a foreach loop https://www.w3schools.com/jsref/jsref_foreach.asp

or you can use a map in this format: const name = "Chuloo" const map = Array.prototype.map

const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`;
})

// ["Ca", "ha", "ua", "la", "oa", "oa"]
console.log(newName);

reference: https://scotch.io/tutorials/4-uses-of-javascripts-arraymap-you-should-know

edited Mar 27, 2021 at 8:15

answered Dec 12, 2019 at 23:52

Shoni Nemavhidi

14812 bronze badges

Collectives™ on Stack Overflow

How can I get a array from a JS for loop?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related