I simpy want to move an image by button click? - css

Question

i want to move an img by button click. I know this question has been asked a lot, but i couldnt use them.
Heres the relevant HTML:
<button class="ggE" (click)="gegenEnemy(chosenHero, actualEnemy);moveFist(); ...
<div class="col">
<img id="img" class="fist" src="...">
This is the function (typescript):
moveFist(): void {
document.getElementById('img').classList.add('fist');
}
And my css, which makes the picture move from left to right:
.fist {
width: 70px;
height: 70px;
position: relative;
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
0% {left:50px; top:20px;}
100% {left:450px; top:20px;}
}
So why cant i connect it with a button click?

Answer 1

First of all validate your HTML code
<button class="ggE" onclick="moveFist();">button</button>
<div class="col">
<img id="img" class="" src="https://via.placeholder.com/150">
<div>
Edits:
function moveFist(){
document.getElementById("img").classList.remove("fist");
// element.offsetWidth = element.offsetWidth;
// Do this instead:
void img.offsetWidth;
document.getElementById("img").classList.add("fist");
}
set the width of img by it's offset width that is,
img.offsetWidth;
Can you something like this ?
function moveFist(){
document.getElementById("img").classList.remove("fist");
// element.offsetWidth = element.offsetWidth;
// Do this instead:
void img.offsetWidth;
document.getElementById("img").classList.add("fist");
}
img{
width: 70px;
height: 70px;
position: relative;
left:50px;
animation-duration: 2s;
top:20px;
}
.fist{
position:relative;
animation-name: example;
}
#keyframes example {
0% {left:50px; top:20px;}
100% {left:450px; top:20px;}
}
<button class="ggE" onclick="moveFist()">button</button>
<div class="col">
<img id="img" class="" src="https://via.placeholder.com/150">
<div>