Gunnar Bittersmann: Problem bei Random Number

Beitrag lesen

SELF-Forum

Problem bei Random Number

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@Der Martin

Ein weiterer ist dein HTML, das invalide ist: title darf kein Kindelement von body sein, und ein script-Element darf meines Wissens kein Kind von html sein, sondern muss Kindelement von head oder body sein. Dasselbe gilt für das style-Element, das bei dir auch mitten im Wald steht.
Dein CSS ist ebenfalls fehlerhaft: Eine dimensionslose Zahl als Wert der width-Eigenschaft ist ungültig. Und ein Stylesheet am Ende des Dokuments zu notieren, ist zumindest bad practise.

Die Struktur sollte so aussehen (s.a. Tutorial Grundgerüst):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Random Number</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
      #number {
        font-size: 90px;
      }
      #b {
        width: 90px;
        height: 55px;
      }
    </style>
  </head>

  <body>
    <p id="number"></p>
    <button id="b" onclick="random();">Get Number</button>

    <script>
      function random() {
        document.getElementById("number").innerHTML = Math.floor(Math.random() * 100);
      }
    </script>
  </body>
</html>

Daran gibt’s aber noch was zu verbessern:

  1. Für Ausgaben gibt es das output-Element:

    <p>
  <output id="number"></output>
</p>

  2. Sprechende Bezeichner verwenden. Was ist b? Wenn du button meinst, dann sag das auch. (Auf einer Seite mit mehreren Buttons wäre das ein denkbar schlechter Bezeichner, aber in deinem Fall mag er gehen.)

  3. Nicht on…-Attribute verwenden, sondern EventListener im script registrieren:

    <button id="button">Get Number</button>

<script>
  document.getElementById("button").addEventListener("click", random);

  const outputElement = document.getElementById("number");

  function random() {
    outputElement.textContent = Math.floor(Math.random() * 100);
  }
</script>

  4. Das Ausgabe-Element nicht bei jedem Aufruf von random() erneut im DOM suchen, sondern einmalig am Anfang und in einer Variablen ablegen. (Eben mit erledigt.)

  5. Aus Performance-Gründen immer die möglichst einfachste Methode wählen. innerHTML ist hier nicht notwendig; textContent ist das Mittel der Wahl. (Eben mit erledigt.)

  6. Schriftgrößen nicht in px angeben, sondern als Vielfaches der Basis-Schriftgröße:

    #number {
  font-size: 6em;
}

  7. Vorsicht beim Setzen fester Breiten bzw. Höhen! Du kannst nicht wissen, ob bei jeder Nutzerin[1] dieselbe Schriftart und -größe verwendet wird wie bei dir; d.h. ob der Text in die von dir angegeben Maße hineinpasst. Besser min-width/min-height verwenden. Und wie eben schon: nicht in px.

    #button {
  min-width: 6em;
  min-height: 4em;
}

😷 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

  1. Männliche Nutzerinnen sind mitgemeint. ↩︎

Beitrag melden
–
Informationen zu den Bewertungsregeln