Question

您好，我正在观看名为“通过构建7个游戏学习JavaScript-完整课程”的youtube视频 “。我花了6分钟的时间查看浏览器中已完成的工作，但除了标题名称之外，我什么也没显示。它的目的是成为存储卡游戏的预览版，我应能看到我制作的空白卡以及显示“ Score：”的文字，但在任何浏览器中都看不到任何内容。

这是我的html代码。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Memory Game</title>
<link rel="stylesheet" href="style.css"></link>
<script src="app.js" charset="utf-8"><script>
</head>
<body>

<h3>Score:<span id="result"></span></h3>

<div class="grid">
</div>

</body>
</html>

这是我的JavaScript代码

document.addEventListener('DOMContentLoaded', () => {

    //card options
    const cardArray = [
    {
        name: 'kyung',
        img: 'images/kyung.png'
    },
    {
        name: 'kyung',
        img: 'images/kyung.png'
    },
    {
        name: 'marmalade',
        img: 'images/marmalade.png'
    },
    {
        name: 'marmalade',
        img: 'images/marmalade.png'
    },
    {
        name: 'jangmi',
        img: 'images/jangmi.png'
    },
    {
        name: 'jangmi',
        img: 'images/jangmi.png'
    },
    {
        name: 'tadashi',
        img: 'images/tadashi.png'
    },
    {
        name: 'tadashi',
        img: 'images/tadashi.png'
    },
    {
        name: 'jason',
        img: 'images/jason.png'
    },
    {
        name: 'jason',
        img: 'images/jason.png'
    },
    {
        name: 'genki',
        img: 'images/genki.png'
    },
    {
        name: 'genki',
        img: 'images/genki.png'
    },
]

const grid = document.querySelector('.grid')

//create your board
function createBoard() {
    for (let i = 0; i < cardArray.length; i++) {
        var card = document.createElement('img')
        card.setAttribute('src', 'images/blank.png')
        card.setAttribute('data-id', i)
        // card.addEventListener('click', flipcard)
        grid.appendChild(card)
    }
}
createBoard()

有人可以告诉我我做错了什么吗？应该将“ // card.addEventListener（'click'，flipcard）“注释掉，因为视频尚未播放到该部分。

Answer 1

您的1 < cardArray.length循环中有i < cardArray.length，但是应该是for。

由于1总是小于cardArray.length（12），因此会导致无限循环。

更改：

for (let i = 0; 1 < cardArray.length; i++) {
    // Code inside loop
}

收件人：

for (let i = 0; i < cardArray.length; i++) {
    // Code inside loop
}

或使用更现代的方式遍历数组：

cardArray.forEach((_, i) => {
    // Code inside loop
});

请注意，我使用_来表示该值不是在循环内使用，而只是在索引内使用。

document.addEventListener('DOMContentLoaded', () => {

  //card options
  const cardArray = [{
      name: 'kyung',
      img: 'images/kyung.png'
    },
    {
      name: 'kyung',
      img: 'images/kyung.png'
    },
    {
      name: 'marmalade',
      img: 'images/marmalade.png'
    },
    {
      name: 'marmalade',
      img: 'images/marmalade.png'
    },
    {
      name: 'jangmi',
      img: 'images/jangmi.png'
    },
    {
      name: 'jangmi',
      img: 'images/jangmi.png'
    },
    {
      name: 'tadashi',
      img: 'images/tadashi.png'
    },
    {
      name: 'tadashi',
      img: 'images/tadashi.png'
    },
    {
      name: 'jason',
      img: 'images/jason.png'
    },
    {
      name: 'jason',
      img: 'images/jason.png'
    },
    {
      name: 'genki',
      img: 'images/genki.png'
    },
    {
      name: 'genki',
      img: 'images/genki.png'
    },
  ]

  const grid = document.querySelector('.grid')

  //create your board
  function createBoard() {
    for (let i = 0; i < cardArray.length; i++) {
      var card = document.createElement('img')
      card.setAttribute('src', 'images/blank.png')
      card.setAttribute('data-id', i)
      // card.addEventListener('click', flipcard)
      grid.appendChild(card)
    }
  }
  createBoard()
});

<h3>Score:<span id="result"></span></h3>
<div class="grid"></div>

Answer 2

您忘记关闭脚本标签：

<script src="app.js" charset="utf-8"><script>

您的整个HTML代码都是用脚本标记编写的，肯定会引发Syntex错误。

我如何使此记忆游戏预览正常工作？

2 个答案: