时间戳

首页 > 解决方案 > 动画扫帚

javascript - 动画扫帚

问题描述

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

然后，当我单击扫帚时，它会更改类（这使它穿过屏幕）。这不起作用。

我不知道我做错了什么 - 任何人都可以帮忙吗？好像身份证没改过一样。

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";}

标签： javascriptgetelementbyid

解决方案

您应该管理变量中的逻辑，例如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;
     }
}

推荐阅读