Question

我正在编写一些简单的代码，但我一直收到“无法读取 null 的属性‘classlist’”的错误消息，即使我之前已经定义过它。我已经折腾了大约 20 分钟，试图看看这是否是一个语法错误，但据我所知，它不是。

JS：

var charater = document.getElementById("charater")
var block = document.getElementById("block");
function jump() {
    charater.classList.add("animate"); //error here
    setTimeout(function(){
        charater.classList.remove("animate");
    }, 1000);
}

HTML：

<!doctype html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Game_test</title>
<link href="GameTest_1_css.css" rel="stylesheet" type="text/css">
</head>
<script src="Unnamed Site 2/gametstjs1.js"></script>
<body onclick="jump()">
<div id="game">
  <div id="charater"></div>
  <div id="block"></div>
</div>
</body>
</html>

CSS（如果需要）：

@charset "UTF-8";
body {
    
    margin: 0;
    padding: 0;
}
#game {
    height: 200px;
    width: 500px;
    border: 3px solid
}
#charater {
    width: 20px;
    height: 50px;
    background-color:#085E19;
    position: relative;
    top: 150px;
    animation: jump 500ms;
    }
#block {
    width: 20px;
    height: 20px;
    background-color:#424343;
    position: relative;
    top:130px;
    left:480px;
    animation: block 3.75s infinite linear;
}
@keyframes block{
    0%{left: 480px;}
    100%{left: -40px;}
}
@keyframes jump{
    0%{top:150px;}
    30%{top:100px;}
    60%{top:100px;}
    100%{top:150px;}
}

一如既往地感谢您的帮助:)

无法读取 null 的属性“classlist”？

0 个答案: