How do I create elements on the screen using javascript?

Question

I'm trying to create my own version of Snake, the arcade game, as a learning exercise. I've tried several versions of this function and had no success. What am I doing wrong?

This code is meant to create the snake at the beginning of the game, preferrably on page-load.

body {
    position: relative;
    display: flex;
    justify-items: center;
    align-items: center;
    margin: 0;
    background: rgb(150, 223, 255);
}

#game-board {
    width: 100vw;
    height: 100vh;
    border: 5px solid darkgrey;
    box-sizing: border-box;
}

button {
    position: absolute;
}

.snake-block {
    position: absolute;
    width: 1vw;
    height: 1vh;
    background: purple;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div id="game-board">
        <button>Start</button>
    </div>
    <script>
        const babySnake = 1;

        function createSnake(babySnake) {
            while babySnake <= 3 || babySnake = false {
                document.createElement("div");
                div.setAttribute('class', 'snake-block');
                snake-block.style.backgroundColor('salmon');
            }
        }

        createSnake()
    </script>
</body>
</html>

You need to append your `div` to an element already in the document — Phil, Jul 28 '22 at 04:10
in addition to the above, you also need to use the result of `document.createElement("div");` not ignore it and think some majicks will make the variable called `div` for you - and `snake-block.style.backgroundColor('salmon');` ... that's attempting to subtract `block.style.backgroundColor('salmon');` from `snake` — Jaromanda X, Jul 28 '22 at 04:19

score 0 · Answer 1 · answered Jul 28 '22 at 04:44

There are a few changes you need to make. You need to keep in mind that you need to store references to elements somewhere (hint: in a variable).

So when you're doing:

document.createElement("div");

The new div that's being created a) has no parent to be attached to, it's just floating and b) you have no way to reference it.

So you need to do this:

var child = document.createElement("div");
child.setAttribute('class', 'snake-block');

Also this line doesn't actually refer to anything as nowhere else is 'snake-block' referred to. You can do what you're after, you can read more about that here:

snake-block.style.backgroundColor('salmon');

Here's a more or less working jsbin.

Francis Fajardo · Answer 2 · 2022-07-28T04:48:13.020

The condition in your while loop should be enclosed in parenthesis: while (condition)
Your "snake block" should be declared as a variable and assigned a value, like so: let snakeBlock = document.createElement("div"); - just calling createElement will do nothing if you'll not assign it to a variable.
Dashes and similar characters are not allowed to be used as a variable name. Otherwise, they'll be interpreted as a mathematical operation. snake-block should be named as snakeBlock instead.
I included a variable pointing to the game board element and made it so that your snake blocks will be appended.
The parameter babySnake in your createSnake function isn't necessary unless you plan on passing something as an argument.

The following should work:

const babySnake = 1;

function createSnake() {
    let gameBoard = document.getElementById("game-board");
    while (babySnake <= 3) {
        let snakeBlock = document.createElement("div");
        snakeBlock.setAttribute('class', 'snake-block');
        snakeBlock.style.backgroundColor = 'salmon';
        gameBoard.appendChild(snakeBlock);
        babySnake++;
    }
}

createSnake();

How do I create elements on the screen using javascript?

2 Answers2