I created a button inside of a moving div with a background image and added an animation to the div for movement. However, I encountered an issue where the button did not react as expected. To test this, I added another stationary button which reacted accordingly. Can anyone assist me in resolving this problem?
Below are the relevant code snippets:
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>
Style
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 {
/* Keyframes details here */
}
@keyframes giantjellyfishswim {
/* Keyframes details here */
}
Script
function jellyfish() {
document.getElementById("jellyfish").style.width = "300px";
document.getElementById("box1").style.animation = "giantjellyfishswim 12s infinite";
alert("You distory the aquarium");
}