Button mit JavaScript bewegen?

Ich möchte wenn man auf einen Button drückt, das er sich bewegt.

Z.b. vorher x=500px ; danach x=600px

Ich habe im Internet gefunden wie man die aktuellen Koordinaten auslesen kann, aber nicht wie man in Javascript neue setzen kann.

Hoffentlich kann mir jemand helfen

Answer 1

[regex9]

Ein einfaches Beispiel:

<style>
  #button-to-move { position: relative }
</style>
<!-- ... -->
<button id="button-to-move">Test</button>
<script>
  document.getElementById("button-to-move").addEventListener("click", function(e) {
    this.style.left = "250px";
    this.style.top = "250px";
});

Demo

Wenn die neue Position schon immer eindeutig feststeht, wäre es allerdings besser, die Style-Anweisungen in einen Klassenselektor auszulagern und nur das class-Attribut des Buttons zu verändern.

CSS:

.end-position {
  left: 250px;
  top: 250px;
}

JavaScript:

// inside event handler:
this.classList.add("end-position");

CSS-Selektoren, die Animationen definieren, kannst du auf diese Weise ebenso an das Element hängen.

Ob der Button zudem relative oder absolute positioniert werden sollte, müsstest du selbst einmal schauen. Lies dazu hier.

Answer 2

[HTMLBOI]

Vielleicht solltest du das mit CSS machen.

https://www.w3schools.com/css/css3_animations.asp

Comments

[HTMLBOI]

Dann machst du einfach:

button{
  left: 500px;
  width: 100px;
  height: 100px;
  }

button:onclick{
  animation-name: example;
  animation-duration: 5s;
}
  
  @keyframes example {
  from {left: 500px;}
  to {left: 600px;}
}

So ganz sicher bin ich mir noch nicht, da ich mich nicht so sehr damit auseinandergesetzt habe, aber ich denke, dass es funktionieren könnte.

[regex9]

@HTMLBOI

Es gibt keine Pseudoklasse namens onclick. CSS kann generell nicht auf Klickelemente reagieren.

Auch das Property left wird den Button nicht beeinflussen, solange dieser statisch positioniert ist.