Button bei Klick immer größer.

ttatoni4 · 02.03.2021

Wie kann ich einstellen, das mein Button immer um 30px padding größer wird, wenn ich darauf klicke. Also nicht nur einmal sondern immer.
Mein Code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="app.js" defer></script>
  
</head>
<body>
    <button id ="mybtn">ABC</button>
<style>
.make-padding {
padding: 30px;
}
</style>
<script>
let btn = document.getElementById("mybtn");
  btn.addEventListener("click", function(){
    
 btn.classList.add("make-padding");
      
  })
  </script>
</body>
</html>

AndreasB · 02.03.2021

Man kann eine Klasse nicht mehrfach zuweisen, so dass dann der Effekt addiert wird.

Wenn du bei jedem Klick einen Stylewert hochzählen möchtest, kannst du das zB über einen inline Style machen, den du immer wieder neu zuweist.