Question

我要建立的东西： 嗨，大家好，我正在尝试制作一个记忆游戏，为了做到这一点，我必须洗牌，然后将卡重新插入HTML中。

问题： 我在将改组后的平台的HTML重新插入DOM时遇到了麻烦，因为它似乎正在返回值“ null”。

我试图解决这个问题

我创建了函数createHTML，该函数旨在编译generateCardHTML生成的所有html并返回html。但是，尽管console.log（deck）返回的html完全符合我的预期，但“ return deck”似乎没有任何作用。

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中，以便您可以看到它，尝试运行代码，您将获得正确的输出

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

1 个答案: