您好,我正在观看名为“通过构建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)“注释掉,因为视频尚未播放到该部分。
答案 0 :(得分:0)
您的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>
答案 1 :(得分:0)
您忘记关闭脚本标签:
<script src="app.js" charset="utf-8"><script>
您的整个HTML代码都是用脚本标记编写的,肯定会引发Syntex错误。