Question

const cardsList = [
                    "fa fa-diamond",
                    "fa fa-paper-plane-o",
                    "fa fa-anchor",
                    "fa fa-bolt",
                    "fa fa-cube",
                    "fa fa-anchor",
                    "fa fa-leaf",
                    "fa fa-bicycle",
                    "fa fa-diamond",
                    "fa fa-bomb",
                    "fa fa-leaf",
                    "fa fa-bomb",
                    "fa fa-bolt",
                    "fa fa-bicycle",
                    "fa fa-paper-plane-o",
                    "fa fa-cube",
                    ];

const deck = document.querySelector('.deck');

function gameStart(){
        let cardShuffle = shuffle(cardsList);
        deck.innerHTML = "";
        for(let i = 0; i < cardShuffle.length; i++){
            deck.appendChild(cardShuffle);
      }
}

每当我在窗口加载时调用函数gameStart（）时，我都在设计一个记忆游戏，但我无法在“节点”上执行“ appendChild”：参数1的类型不是“节点”。

Answer 1

“ fa fa-diamond”在我看来像是一个班级名称。因此，如果我假设您想要<div class="fa fa-diamond"></div>

在循环中，但在forEach中可能会更好：

let node = document.createElement('div');
node.className = cardShuffle[i];
deck.appendChild(node);

//将创建一个<div class="fa fa-diamond"></div>，...

Answer 2

我不确定您到底想做什么，但是如果我不得不猜测，我认为您正在尝试使用超棒的字体。

由于您未提供随机播放功能，因此我在此处创建了一个自定义功能，可能无法满足您的要求。

const cardsList = [
"fa fa-diamond",
"fa fa-paper-plane-o",
"fa fa-anchor",
"fa fa-bolt",
"fa fa-cube",
"fa fa-anchor",
"fa fa-leaf",
"fa fa-bicycle",
"fa fa-diamond",
"fa fa-bomb",
"fa fa-leaf",
"fa fa-bomb",
"fa fa-bolt",
"fa fa-bicycle",
"fa fa-paper-plane-o",
"fa fa-cube",
];
const deck = document.querySelector('.deck');
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
function gameStart(){
        let cardShuffle = shuffle(cardsList);
        deck.innerHTML = "";
        for(let i = 0; i < cardShuffle.length; i++){
            var node = document.createElement("i");
            node.className = cardShuffle[i];
            deck.appendChild(node);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
        <div class="deck"></div>
        <button onclick="gameStart();">Start game</button>
        
</body>
</html>

Answer 3

您可以使用textContent或innerHTML添加文本：

deck.textContent += cardShuffle;

appendChild仅使用可以用document.createElement创建的节点。

我收到此错误-无法在“节点”上执行“ appendChild”：参数1的类型不是“节点”

3 个答案: