Vanilla JS: How do I return dynamic html so I can reuse it in element.innerHTML?

Question

What I'm building: Hi guys, I'm trying to build a memory game and in order to do it, I have to shuffle the deck and reinsert the cards into the HTML.

Problem: I'm having trouble with reinserting the shuffled deck's HTML into the DOM, because it appears to be returning the value "null".

My attempt at solving this

I've created the function createHTML which is meant to compile all the html generated by generateCardHTML, and return html. However, 'return deck' doesn't seem to do anything, although console.log(deck) returns the html exactly as I expected.

cards = ['card1', 'card1',
'card2','card2',
'card3','card3',
];


function initGame() {
    const shuffledCards = shuffle(cards);

    // generates each li
    function generateCardHTML(card) {
      return `<li class="card"><i class="${card}"></i></li>`
    };

    // PROBLEM BEGINS HERE

    function createHTML(){
      let deck = "";
      shuffledCards.forEach(function(card) {
        const genHTML = generateCardHTML(card);
        deck += genHTML;
      })
      return deck;
    };
  createHTML();
};

initGame();

const gameDeck = document.querySelector('.card');

gameDeck.innerHTML = initGame();


// Shuffle function from http://stackoverflow.com/a/2450976
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;
}

The closest thing I found to my problem was this but it doesn't seem to address the same issue. Either that or I'm just too inexperienced to understand it.

Answer 1

Because initGame() is not returning a value, you have to return a value which is the returned value of createHTML() in this scenario.

like this

 cards = ['card1', 'card1', 'card2', 'card2', 'card3', 'card3', ]; function initGame() { const shuffledCards = shuffle(cards); // generates each li function generateCardHTML(card) { return `<li class="card"><i class="${card}"></i> ${card}</li>` }; function createHTML() { let deck = ""; shuffledCards.forEach(function(card) { const genHTML = generateCardHTML(card); deck += genHTML; }) return deck; }; // NEED TO RETURN SOMETHING return createHTML(); }; // THERE IS NO NEED FOR THIS // initGame(); const gameDeck = document.querySelector('.card'); gameDeck.innerHTML = initGame(); // Shuffle function from http://stackoverflow.com/a/2450976 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; } 

 <ul class='card'></ul> 

I also added the card value into the li as text so you can see it, try to run the code and you will get the correct output

Answer 2

You are assigning the return value of initGame() to gameDeck.innerHTML , while initGame() does not return anything. You probably want

 cards = ['card1', 'card1', 'card2','card2', 'card3','card3', ]; function initGame() { const shuffledCards = shuffle(cards); // generates each li function generateCardHTML(card) { return '<li class="card"><i class="${card}">'+card+'</i></li>' }; // PROBLEM BEGINS HERE function createHTML(){ let deck = ""; shuffledCards.forEach(function(card) { const genHTML = generateCardHTML(card); deck += genHTML; }) return deck; }; return createHTML(); }; initGame(); const gameDeck = document.querySelector('.card'); gameDeck.innerHTML = initGame(); // Shuffle function from http://stackoverflow.com/a/2450976 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; } 

 <ol class="card"> </ol> 

Edit : Make sure your gameDeck element is loaded when the script run.