CODEWITHSUNDEEP
javascripthtml
user13790968
user13790968

Reputation: 123

adding score to div

i'm trying to render score on screen. When i appendChild, it creates an array. Is there a way to update instead of appending?

function screenScore() {
    let screen = new Text("score: " + score);
    document.getElementById('score').appendChild(screen);
    // document.getElementById('score').last().update(screen);
}

function setupKeyboardControls() {
    document.addEventListener('keydown', function (e) {
        // console.log(e.keyCode);
        if (e.keyCode === 37) {
            moveLeft();
        } else if (e.keyCode === 38) {
            moveUp();
        } else if (e.keyCode === 39) {
            moveRight();
        } else if (e.keyCode === 40) {
            moveDown();
        }
        eraseMap();
        drawMap();
        console.log(score);
        screenScore();
        // removeScore();
    });
}

<body>
    <div id="score"></div>
    <div id="body"></div>
    <script src="./dist/main.js"></script>
</body>
</html>

Upvotes: 0

Views: 269

Answers (1)

AC101
AC101

Reputation: 938

Use innerText instead of appendChild

document.getElementById('score').innerText = "score: " + score;

Update: As stated by others in the comments, it's better to use innerText instead of innerHTML for security reasons so I updated my example.

Upvotes: 3

Related Questions