时间戳

首页 > 解决方案 > Vanilla JS：如何返回动态 html 以便在 element.innerHTML 中重用它？

javascript - Vanilla JS：如何返回动态 html 以便在 element.innerHTML 中重用它？

问题描述

我正在构建的内容： 大家好，我正在尝试构建一个记忆游戏，为了做到这一点，我必须洗牌并将卡片重新插入 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;
}

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

标签： javascript

解决方案

因为 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值添加到lias 文本中，以便您可以看到它，尝试运行代码，您将获得正确的输出

推荐阅读