javascript - 普通 JS : How do I return dynamic html so I can reuse it in element. insideHTML？

Question

我正在构建的内容:大家好，我正在尝试构建一个内存游戏，为了做到这一点，我必须洗牌并将卡片重新插入 HTML 中。

问题:我在将洗牌组的 HTML 重新插入 DOM 时遇到问题，因为它似乎返回值“null”。

我尝试解决这个问题

我创建了函数createHTML，它的目的是编译由generateCardHTML生成的所有html，并返回html。然而，“return Deck”似乎没有做任何事情，尽管 console.log(deck) 返回的 html 完全符合我的预期。

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;
}

我发现最接近我的问题的是 this但它似乎没有解决同一问题。要么是我太缺乏经验，无法理解它。

Answer 1

因为 initGame() 没有返回值，所以在这种情况下您必须返回一个值，即 createHTML() 的返回值。

像这样

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>

我还将 card 值作为文本添加到 li 中，以便您可以看到它，尝试运行代码，您将获得正确的输出