动画扫帚

Question

在 Javascript 中，当我点击扫帚时，它会将图像 src 更改为 gif，并将 ID 更改为“walkingBroom”。这行得通。

然后，当我点击扫帚时，它会改变 class（这会使其穿过屏幕）。这不起作用。

我不知道我做错了什么 - 谁能帮忙？好像没改过ID

document.getElementById("stillBroom").addEventListener("dblclick", animate);

function animate(){
  document.getElementById("stillBroom").src = "broom.gif";
  document.getElementById("stillBroom").id = "walkingBroom";}


document.getElementById("walkingBroom").addEventListener("click", walk);

function walk(){
  document.getElementById("walkingBroom").className = "broom pattern0 speed1";}

Answer 1

您应该在变量中管理逻辑，例如 let currentState="still"，然后在单击时更改为 currentState="walking"，并据此采取行动。目前，您正在立即尝试将点击事件附加到不存在的“walkingBroom”元素（它将存在，但稍后，在您单击一次扫帚之后）。就此而言，您的控制台很可能会显示 Error - Can't read property addEventListener of null，而您的脚本会在没有运行的情况下崩溃。打开你的控制台，它很有用。

let currentState = "still";
broom.addEventListener("dblclick", clickHandler);

const clickHandler = () => {
     switch(currentState) {
          case "still" :
               currentState="walking";
               broom.src="broom.gif";
               break;
          case "walking":
               currentState="flying";
               broom.className = "broom pattern0 speed1";
               break;
     }
}

动画扫帚

Animating brooms

javascript

getelementbyid