ttatoni: Button bei Klick immer größer?

SELF-Forum

Button bei Klick immer größer?

ttatoni
– Informationen zu den Bewertungsregeln

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:

<!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>Quelltext hier
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Button bei Klick immer größer?

    Matthias Scharwies (Versionen)
    – Informationen zu den Bewertungsregeln

    Servus!

    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:

    <!DOCTYPE html>

:root {
  --polster: 0;
}

.make-padding {
  padding: var(--polster);
}
 </style>

    Lege ein Custom_properties_(CSS-Variablen) an

    und setze den Wert mit setProperty immer wieder um 30px höher.

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Button bei Klick immer größer?

      ttatoni
      – Informationen zu den Bewertungsregeln

      Wie würde das dann mit dem SetProperty aussehen?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Button bei Klick immer größer?

      ttatoni
      Dieser Beitrag wurde gelöscht: Der Beitrag ist ein Duplikat eines anderen Beitrags.

    3. Button bei Klick immer größer?

      Gunnar Bittersmann Homepage des Autors (Versionen)
      – Informationen zu den Bewertungsregeln

      @@Matthias Scharwies

      und setze den Wert mit setProperty immer wieder um 30px höher.

      Nein, so nicht.

      Wenn man einen Zähler implementiert, dann zählt man um 1 höher. (Wir sind hier nicht bei Zeilennummern in BASIC.)

      Mit dem aktuellen Zählerstand dann padding: calc(var(--counter) * 30px). Besser noch mit einer an die Schriftgröße gekoppelten Einheit, also em bzw. rem.

      😷 LLAP

      --
      “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Button bei Klick immer größer?

    Rolf B (Versionen)
    – Informationen zu den Bewertungsregeln

    Hallo ttatoni,

    habe ich das richtig verstanden? Bei jedem Klick soll er größer werden?

    1. Click: 30px Padding
    2. Click: 60px Padding
    3. Click: 90px Padding

    Matthias Idee mit dem custom property, das man hochsetzt, wäre eine Möglichkeit. Man muss es nur etwas anders machen, weil der Wert "30px" sich schlecht in JavaScript erhöhen lässt.

    Besser wäre da sowas:

    button {
   padding: calc(var(--polster) * 1.5em);
}

    du zählst --polster pro Schritt um 1 hoch und überlässt das Gefummel mit Einheiten dem CSS System. Das kann das besser.

    Damit wäre das initiale Padding 0. Wenn Du das nicht willst, braucht es einen passenden Anfangswert für --polster, oder du addierst in der Formel einen Mindestwert, z.B. so:

    button {
   padding: calc(var(--polster) * 1.5em + 0.5em);
}

    Damit wäre das Padding zu Anfang 0.5em, und wenn --polster hochgesetzt wird, wächst es entsprechend dem Wert in --polster.

    Die Frage wäre nun noch, wo man --polster unterbringt. Soll die Polsterung ausschließlich für diesen einen Button gelten? Oder hast Du mehrere Buttons, die sich so verhalten sollen? Wachsen sie gemeinsam oder wächst nur der, auf den geklickt wird? Ein Custom Property kann überall im DOM gesetzt werden, und je höher im Baum es hängt, an desto mehr Elemente wird es vererbt.

    Wenn ein und der selbe --polster-Wert für alle Buttons gelten soll, dann würde ich das custom-property an den body hängen. Oder als :root-Element, das läuft auf's gleiche hinaus. Gilt er nur für einen Button, oder soll an mehreren Buttons eigene Werte haben können, dann gehört er an den Button. Das ist jetzt dein Seitenlayout, das wir hier nicht kennen.

    Der click-Handler für den Button würde dann dies tun:

    btn.addEventListener("click", function() {
   let btnStyle = window.getComputedStyle(btn);
   let polster = parseInt(btnStyle.getPropertyValue("--polster")) || 0;
   btn.style.setProperty("--polster", polster + 1);
}

    Das registriert einen click-Handler auf dem Element in der btn Variablen. Also mutmaßlich der Button, der geklickt werden soll 😀. Nun muss man abrufen, welche Stylewerte gerade für diesen Button gelten - mit getComputedStyle. Dort holen wir uns den Wert des custom property --polster heraus und machen einen int-Wert daraus. War --polster noch nicht gesetzt, kommt dabei NaN heraus, deswegen ein || 0 hintendran, um daraus 0 zu machen. Und schließlich wird das custom property wieder gesetzt, diesmal aber direkt in style des Buttons. Ob das richtig ist oder ob Du das woanders ablegen musst - siehe oben. Kommt auf deine Absichten an.

    Der Effekt ist, dass --polster mit jedem Klick um 1 wächst und die Formel, die bei Padding angegeben ist, das Padding dadurch um den Wert vergrößert, mit dem --polster multipliziert wird.

    Rolf

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln