nicht angemeldet
Problem bei Random Number
Der Martin
Gunnar Bittersmann
Henry
Matthias ScharwiesHey Leute bin 15 und will anfangen zu Programmieren... Jedoch ist mir ein Fehler unterlaufen den ich einfach nicht finden kann, könnt ihr mir helfen?
<html>
<body>
<title> Random Number </title>
<p id="number"></p>
<button id="b" oneclick="random();"> Get Number </button>
</body>
<script>
function random(){
document.getElementById("number") .innerHTML = Math.floor (Math.random () * 100);
}
</script>
<style>
#number{
font-size:90px ;
}
#b{
width:90;
height:55px;
}
</style>
</html>
-
Tach!
Jedoch ist mir ein Fehler unterlaufen den ich einfach nicht finden kann, könnt ihr mir helfen?
Vermutlich. Aber beschreib doch bitte erstmal das Problem. Was erwartest du an welcher Stellt? Was passiert stattdessen?
<button id="b" oneclick="random();"> Get Number </button>Sollte es sich etwa um den einfachen Vertipper
oneclickvs.onclickhandeln?dedlfix.
-
Ich danke dir, das war der Fehler, hab vielen dank...👍
-
Hallo,
Ich danke dir, das war der Fehler, hab vielen dank...👍
das war einer der Fehler.
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.Live long and
proshealthy,
Martin--
Für welches Tier mühen wir uns am meisten ab? - Für die Katz'.-
@@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:
-
Für Ausgaben gibt es das
output-Element:<p> <output id="number"></output> </p> -
Sprechende Bezeichner verwenden. Was ist
b? Wenn dubuttonmeinst, dann sag das auch. (Auf einer Seite mit mehreren Buttons wäre das ein denkbar schlechter Bezeichner, aber in deinem Fall mag er gehen.) -
Nicht
on…-Attribute verwenden, sondern EventListener imscriptregistrieren:<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> -
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.) -
Aus Performance-Gründen immer die möglichst einfachste Methode wählen.
innerHTMList hier nicht notwendig;textContentist das Mittel der Wahl. (Eben mit erledigt.) -
Schriftgrößen nicht in
pxangeben, sondern als Vielfaches der Basis-Schriftgröße:#number { font-size: 6em; } -
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-heightverwenden. Und wie eben schon: nicht inpx.#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
Männliche Nutzerinnen sind mitgemeint. ↩︎
-
-
-
-
Hallo dedlfix,
Sollte es sich etwa um den einfachen Vertipper
oneclickvs.onclickhandeln?In dem Fall gut erkannt. @Rolf B das hier wäre dann wieder so ein typischer Fall, wo es viel leichter wäre mal kurz zu klicken und seine Theorie dazu auszuprobien als ein Fiddel oser sonstwas zu erstellen, oder sehe ich das falsch?
Da ja hier nicht als Link möglich, bitte copy+adressfeldeingabe
data:text/html,<body oninput="i.srcdoc=h.value" onload="h.value=atob(h.value);i.srcdoc=h.value"><style>textarea,iframe{width:40vw;height:80vh;margin:10;border:3px dotted black;}body, html{margin:2%;width:100%;}textarea{width:33.33%;font-size:18}</style><h1>Hier Text oder HTML eingeben</h1><textarea placeholder=HTML id=h>PGh0bWw+CgogICAgPGJvZHk+CiAgICAgICAgCjx0aXRsZT4gUmFuZG9tIE51bWJlciA8L3RpdGxlPgoKICAgICAgICAKPHAgaWQ9Im51bWJlciI+PC9wPgoKICAgICAgICA8YnV0dG9uIGlkPSJiIiBvbmVjbGljaz0icmFuZG9tKCk7Ij4gR2V0IE51bWJlciA8L2J1dHRvbj4KCiAgICA8L2JvZHk+CgogICAgPHNjcmlwdD4KICAgICAgICBmdW5jdGlvbiByYW5kb20oKXsKICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgibnVtYmVyIikgLmlubmVySFRNTCA9IE1hdGguZmxvb3IgKE1hdGgucmFuZG9tICgpICogMTAwKTsKICAgICAgICB9CiAgICA8L3NjcmlwdD4KCiAgICA8c3R5bGU+CiAgICAgICAgI251bWJlcnsKICAgICAgICAgICAgZm9udC1zaXplOjkwcHggOwogICAgICAgIH0KICAgICAgICAjYnsKICAgICAgICAgICAgd2lkdGg6OTA7CiAgICAgICAgICAgIGhlaWdodDo1NXB4OwogICAgICAgIH0KICAgIDwvc3R5bGU+CjwvaHRtbD4=</textarea><iframe id=i></iframe>--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
Servus!
Hallo dedlfix,
Sollte es sich etwa um den einfachen Vertipper
oneclickvs.onclickhandeln?In dem Fall gut erkannt. @Rolf B das hier wäre dann wieder so ein typischer Fall, wo es viel leichter wäre mal kurz zu klicken und seine Theorie dazu auszuprobien als ein Fiddel oser sonstwas zu erstellen, oder sehe ich das falsch?
Eines meiner ersten Posts zum Thema JavaScript hatte ein
getElementbyIddrin. Damals gab's noch keine Kosole - ein Profi hatte den Typo aber gleich gesehen: (getElementById).Oft sind es aber nicht die im Forum gezeigten Code-Snippets, die die Probleme machen, sondern die Wechselwirkung mit den nicht im Post erwähnten anderen Webseiten-Bestandteilen.
Da würde eben auch kein Frickl, Fiddle oder Codepen helfen.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
-
-
