javascript - 为什么我在 div 中的移动按钮没有反应？

Question

我在移动的 div 中制作了一个按钮，并放置了一张图片作为背景。我还为 div 放置了动画以使其移动。但是，按钮没有反应。我在按钮上制作了另一个按钮(用于测试并且它不会移动)，它会使用react。谁能帮我解决这个问题？

代码如下:

HTML

<h1>Animated Aquarium</h1>
<div id="Aquarium">
  <div id="box1">
    <button type="button" id="button1" onclick="jelly fish()">  
      <img src="/img/7959f86c-dccb-410e-b928-73a282b866f1/jellyfish.png"id="jellyfish">
    </button> 
  </div>
  <button type="button" id="button1" onclick="jellyfish()">test</button>
</div>

样式

body {
  background: linear-gradient(to bottom right, #2F80ED, #56CCF2);
  height: 100vh;
}
#Aquarium {
  width: 700px;
  height: 500px;
  border: 10px solid #000;
  margin: 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("https://ak4.picdn.net/shutterstock/videos/9874064/thumb/1.jpg");    
}
#box1{
  animation: jellyfishswim 24s infinite;  
  position: absolute;
}
#button1{    
  background-color: inherit;
  border:0px;
}
#jellyfish{
  width: 100px;
  height: 100px;
}

@keyframes jellyfishswim {
  0% {
    margin-left: 0px;
    transform: scaleX(-1);
  }
  10% {
    margin-left: 140px;
    margin-bottom: 100px;
    transform: scaleX(-1);
  }
  20% {
    margin-left: 280px;
    margin-bottom:200px;
    transform: scaleX(-1);
  }
  30% {
    margin-left: 420px;
    margin-bottom: 300px;
    transform: scaleX(-1);
  }
  40% {
    margin-left: 560px;
    margin-top: 400px;
    transform: scaleX(-1);
  }
  50% {
    margin-left: 600px;
    margin-top: 420px;
    transform: scaleX(1);}
  60% {
    margin-left: 500px;
    margin-bottom: 340px;
    transform: scaleX(1);
  }
  70% {
    margin-left: 420px;
    margin-bottom: 300px;
    transform: scaleX(1);
  }
  80% {
    margin-left: 280px;
    margin-bottom: 200px;
    transform: scaleX(1);
  }
  90% {
    margin-left: 120px;
    margin-bottom: 150px;
    transform: scaleX(1);
  }
}

@keyframes giantjellyfishswim {
  0% {
    margin-left: 0px;
    transform: scaleX(-1);
  }
  10% {
    margin-left: 70px;
    margin-bottom: 50px;
    transform: scaleX(-1);
  }
  20% {
    margin-left: 140px;
    margin-bottom:100px;
    transform: scaleX(-1);
  }
  30% {
    margin-left: 210px;
    margin-bottom: 150px;
    transform: scaleX(-1);
  }
  40% {
    margin-left: 280px;
    margin-top: 200px;
    transform: scaleX(-1);
  }
  50% {
    margin-left: 300px;
    margin-top: 210px;
    transform: scaleX(1);
  }
  60% {
    margin-left: 250px;
    margin-bottom: 170px;
    transform: scaleX(1);
  }
  70% {
    margin-left: 210px;
    margin-bottom: 150px;
    transform: scaleX(1);
  }
  80% {
    margin-left: 140px;
    margin-bottom: 100px;
    transform: scaleX(1);
  }
  90% {
    margin-left: 70px;
    margin-bottom: 50px;
    transform: scaleX(1);
  }
}

脚本

function jellyfish() {
  document.getElementById("jellyfish").style.width = "300px";
  document.getElementById("box1").style.animation = "giantjellyfishswim 12s infinite";
  alert("You distory the aquarium");
}

Answer 1

改变

<button type="button" id="button1" onclick="jelly fish()">  

到

<button type="button" id="button1" onclick="jellyfish()">  

function jellyfish() {
    document.getElementById("jellyfish").style.width = "300px";
    document.getElementById("box1").style.animation = "giantjellyfishswim 12s infinite";
    alert("You distory the aquarium");
}

body {
  background: linear-gradient(to bottom right, #2F80ED, #56CCF2);
  height: 100vh;
}

#Aquarium {
  width: 700px;
  height: 500px;
  border: 10px solid #000;
  margin: 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("https://ak4.picdn.net/shutterstock/videos/9874064/thumb/1.jpg");
}

#box1 {
  animation: jellyfishswim 24s infinite;
  position: absolute;
}

#button1 {
  background-color: inherit;
  border: 0px;
}

#jellyfish {
  width: 100px;
  height: 100px;
}



@keyframes jellyfishswim {
  0% {
    margin-left: 0px;
    transform: scaleX(-1);
  }

  10% {
    margin-left: 140px;
    margin-bottom: 100px;
    transform: scaleX(-1);
  }

  20% {
    margin-left: 280px;
    margin-bottom: 200px;
    transform: scaleX(-1);
  }

  30% {
    margin-left: 420px;
    margin-bottom: 300px;
    transform: scaleX(-1);
  }

  40% {
    margin-left: 560px;
    margin-top: 400px;
    transform: scaleX(-1);
  }

  50% {
    margin-left: 600px;
    margin-top: 420px;
    transform: scaleX(1);
  }

  60% {
    margin-left: 500px;
    margin-bottom: 340px;
    transform: scaleX(1);
  }

  70% {
    margin-left: 420px;
    margin-bottom: 300px;
    transform: scaleX(1);
  }

  80% {
    margin-left: 280px;
    margin-bottom: 200px;
    transform: scaleX(1);
  }

  90% {
    margin-left: 120px;
    margin-bottom: 150px;
    transform: scaleX(1);
  }
}


@keyframes giantjellyfishswim {
  0% {
    margin-left: 0px;
    transform: scaleX(-1);
  }

  10% {
    margin-left: 70px;
    margin-bottom: 50px;
    transform: scaleX(-1);
  }

  20% {
    margin-left: 140px;
    margin-bottom: 100px;
    transform: scaleX(-1);
  }

  30% {
    margin-left: 210px;
    margin-bottom: 150px;
    transform: scaleX(-1);
  }

  40% {
    margin-left: 280px;
    margin-top: 200px;
    transform: scaleX(-1);
  }

  50% {
    margin-left: 300px;
    margin-top: 210px;
    transform: scaleX(1);
  }

  60% {
    margin-left: 250px;
    margin-bottom: 170px;
    transform: scaleX(1);
  }

  70% {
    margin-left: 210px;
    margin-bottom: 150px;
    transform: scaleX(1);
  }

  80% {
    margin-left: 140px;
    margin-bottom: 100px;
    transform: scaleX(1);
  }

  90% {
    margin-left: 70px;
    margin-bottom: 50px;
    transform: scaleX(1);
  }
}

<div id="aquarium">
  <div id="box1">
    <button type="button" id="button1" onclick="jellyfish()">  
      <img src="/img/7959f86c-dccb-410e-b928-73a282b866f1/jellyfish.png" id="jellyfish">
    </button>
  </div>
</div>