首页 > 解决方案 > 将分数添加到 div

问题描述

我正在尝试在屏幕上呈现分数。当我 appendChild 时,它会创建一个数组。有没有办法更新而不是追加?

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>

标签: javascripthtml

解决方案


使用innerText代替appendChild

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

更新:正如评论中其他人所说,出于安全原因,最好使用innerText而不是,innerHTML所以我更新了我的示例。


推荐阅读