how to push from one array of class to another array in javascirpt?

Question

I have an array of images with class="btn". When clicked, the listener replace the btn.src with an image randomly from images arr.

Then, I need to have the randomly-selected-item.src stored in an array for further operations. I was able to do the random insertion of image to btn class but dont know how to grab the randomly-selected item each time and push them in an array for further operation.

In short I am trying to check if the two selected items have the same src or not.

var x = document.getElementsByClassName('btn');
for (var i = 0; i < x.length; i++) {
  x[i].addEventListener('click', feedImages);
}


function feedImages(e) {
    var images = ["image/1.png",
                  "image/2.png",
                  "image/3.png",
                  "image/4.png",
                  "image/5.png",
                  "image/6.png"];

    var img = document.createElement("img");
    img.src = images[Math.floor(Math.random()*images.length)];
  document.getElementsByClassName("result").appendChild(img);

};

// how to grab this.img.src and push them in a new array each time so I will have something like

var newArr["selectedImage.png", ....];

after user clicked on any item

the HTML looks simple. Upon trigger SRC changes randomly to a new image.

<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">

Possible duplicate of [How to append something to an array?](https://stackoverflow.com/questions/351409/how-to-append-something-to-an-array) — Heretic Monkey, Aug 03 '18 at 12:12
Read the MDN Docs carefully, there is everything you need. [Array general Docs](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array) . The method you are looking for is called `push()` -> [Push new elements to array](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/push) — Megajin, Aug 03 '18 at 12:18

score 0 · Accepted Answer · answered Aug 03 '18 at 12:10

You can get the easily by using the random number as a index of images array and using that to push in newArr as well as in img.src.

var x = document.getElementsByClassName('btn');
 for (var i = 0; i < x.length; i++) {
   x[i].addEventListener('click', feedImages);
 }

var newArr = [];
 function feedImages(e) {
    var images = ["image/1.png",
                  "image/2.png",
                  "image/3.png",
                  "image/4.png",
                  "image/5.png",
                  "image/6.png"];

    var img = document.createElement("img");
    var randomVal = Math.floor(Math.random()*images.length);
    newArr.push(images[randomVal]);
    img.src = images[randomVal];
    document.getElementsByClassName("result")[0].appendChild(img);
    console.log(newArr);
 };

<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<div class='result'></div>

Thanks, this worked like a charm but can I now say if(newArr[0]==newArr[1]){then do this...}? how does arr element comparison work? — AliR, Aug 03 '18 at 13:45

how to push from one array of class to another array in javascirpt?

1 Answers1