Как исправить ошибку JavaScript: «x» не определен - PullRequest
Новая
       15

Как исправить ошибку JavaScript: «x» не определен

1 голос
/ 08 мая 2019

Я новичок в JS, и у меня есть следующий код для игры "Snakes and ladders": 

var playboard = [
    [" ", " ", "s", " ", "|", " "],
    [" ", "/", " ", " ", "|", " "],
    ["/", " ", "\\", "s", "|", " "],
    [" ", "|", "/", "\\", " ", "s"],
    [" ", "|", " ", " ", "/", " "],
    [" ", "|", " ", "/", " ", " "],
    ];
var doc = document; //error
var table = doc.createElement('table');

for( var r = 0; r < playboard.length; r++ ) {
    var row = doc.createElement('row');

for( var c = 0; c < playboard[r].length; c++ ) {
    var symbol = playboard[r][c];

    var col = doc.createElement('td');

    var className = '';

    if( symbol === '/' ) {
        className = 'snakeBody';
    }
    else if (symbol === '|') {
        className = 'ladderUp';
    }
    else if (symbol === 's') {
        className = 'snakeHead';
    }
    else if (symbol === '\\') {
        className = 'ladderUpLeft';
    }
    else if (symbol === ' ') {
        className = 'empty'
    }

    col.setAttribute('class', className);

    row.appendChild(col);
}

table.appendChild(row);
}

window.onload = function() { //error
    document.body.appendChild(table); //error
}

Я собираюсь создать простой стол, похожий на игровой стол Snakes and ladders. Как вы можете сказать, он будет содержать только несколько изображений змей и лестниц. Он выдает одинаковую ошибку в 3 разных рядах. Как я могу это исправить? Заранее спасибо!

HTML: 

<!DOCTYPE html>

<html >
<head>
    <title> Snakes and ladders </title>
    <script src="scriptSnakesAndLadders.js"></script>
    <link rel="stylesheet" type="text/css" href="styleSnakesAndLadders.css">
</head>
<body>

</body>
</html>

CSS: 

    table, th, td {
   border: 3px solid black;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;    
    width: 642px;
    height: 700px;
}
table {
    border-collapse: separate;
    border-spacing: 0px 0px;
}
td {
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
}
td.empty {
    background-color: lawngreen;
}
td.snakeHead {
    background-image: url("SnakesAndLadders/head.jpg");
    background-size: cover;
}
td.snakeBody {
    background-image: url("SnakesAndLadders/body.jpg");
    background-size: cover;

}
td.ladderUp {
    background-image: url("SnakesAndLadders/ladderTop.jpg");
    background-size: cover;
}
td.ladderUpLeft {
    background-image: url("SnakesAndLadders/ladderLeft.jpg");
    background-size: cover;
}

Я сделал некоторые правки, чтобы теперь вы могли видеть весь код, который у меня есть.

1 Ответ

0 голосов
/ 08 мая 2019

измените <script src="scriptSnakesAndLadders.js"></script> на <script src="scriptSnakesAndLadders.js" defer></script>, чтобы загрузить его после загрузки тела.

...