How to convert html elements to an array in JS?

Question

I am building a memory card game as my first javascript project. What I've done is made a section in HTML that contains 12 cards like this:

    <section id="memorygame">
        <div class="card">
            <img class="front">
            <img class="back"  style="background-image: url(assets/img/banana.png);">
        </div>

I then duplicated this via the cloneNode() Method so the grid would display 24 cards in total. Now I would like to use the following code to randomize the cards:

  function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

I assume I need to have an array to make it work, but how do I convert the cards into an array? I'm completely lost. If someone could explain how and why, I'd be very appreciative.

Beware that your randomize function has the ability to assign more than 2 cards of the same type and less than 2 cards of others. You should randomize and array of all the cards and assign them in sequence. To get all the cards into an array-like `HTMLCollection` object you can iterate over: `var x = document.getElementsByClassName("card");` More here: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp — Jeff, Jan 23 '20 at 22:00

Emiel Zuurbier · Answer 1 · 2020-01-23T22:09:06.057

There are a couple of ways of getting HTML elements and putting them in an array. Consider the following line to select your elements.

const cards = document.querySelectorAll('.card');

Your card elements are now stored in a NodeList, which is an array-like object. Think of it as an object with indexes. You can use the following examples to convert your list into an array.

The Array.from method.
This method will return a new array with all the indexes of an array-like or iterable object.

const arr = Array.from(cards);

Spread syntax.
This is an ES6 feature which will lay each individual index in a new array. It's also a great way to concatenate arrays.

const arr = [...cards];

Slice and call.
This is an old one, but if you'll need IE11, or less, browser support then this will work in most cases.

var arr = Array.prototype.slice.call(cards);

Loop and push.
It's also possible to loop the NodeList or HTMLCollection and push each element into a new array.

var arr = [];
for (var i = 0; i < cards.length; i++) {
  arr.push(cards[i]);
}

score 0 · Answer 2 · answered Jan 23 '20 at 22:10

0

To tackle this issue, I would say first, you don't need to treat the DOM object as an array you need to shuffle. it is the image you need to shuffle.

So you just need to build an array of image URL. you may want to have identifier with it so it would be an object { key: "banana", url: "assets/img/banana.png" }

then you pass this array of object to your function to shuffle it and change the URL of each Dom object using JS

answered Jan 23 '20 at 22:10

H L

36
7

I would say it's the card the OP needs to shuffle. The card has an image. But that's semantics ;). – Heretic Monkey Jan 23 '20 at 22:14
Totally agree. But just suggest OP can have a different way of thinking that we not necessary need to treat the DOM object as a card. A card object basically is just the image and any value attach to it. and we put the object data to the DOM. the card game is to shuffle the card, not the DOM object. But if it is a hard requirement (like class assignment) to shuffle the DOM object, then that's sure not fit the bill... I would agree... but if the question is just create a card game, shuffling the object array is much easier than shuffling the DOM. – H L Jan 24 '20 at 17:49

How to convert html elements to an array in JS?

2 Answers2