JS Random

  • JavaScript

Es gibt 12 Antworten in diesem Thema. Der letzte Beitrag () ist von MaxeStudios.

    Hey, ich lerne mich momentan in JavaScript ein.
    Ich versuche mit folgendem Code, ein zufälliges Bild zu laden:
    Spoiler anzeigen

    HTML-Quellcode

    1. <html><head>
    2. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    3. <style type="text/css">
    4. </style>
    5. <title>Error 404</title></head>
    6. <script>
    7. function loadImage() {
    8. var x = Math.floor((Math.random() * 9) + 1);
    9. if (x === "1") {
    10. document.body.background-image = "1.jpg";
    11. }
    12. if (x === "2") {
    13. document.body.background-image = "2.jpg";
    14. }
    15. if (x === "3") {
    16. document.body.background-image = "3.jpg";
    17. }
    18. if (x === "4") {
    19. document.body.background-image = "4.jpg";
    20. }
    21. if (x === "5") {
    22. document.body.background-image = "5.jpg";
    23. }
    24. if (x === "6") {
    25. document.body.background-image = "6.jpg";
    26. }
    27. if (x === "7") {
    28. document.body.background-image = "7.jpg";
    29. }
    30. if (x === "8") {
    31. document.body.background-image = "8.png";
    32. }
    33. if (x === "9") {
    34. document.body.background-image = "9.png";
    35. }
    36. }
    37. </script>
    38. <body>
    39. <body onload="loadImage()">
    40. </body></html>

    Bei dem Code bekomme ich keine Ausgabe eines Bildes, woran liegt es? Was übersehe ich?


    Lg Louis




    (Falls mein Thread im falschen Abteil ist, bitte verschieben )

    *Topic verschoben*
    Viel Erfolg,
    MaxeStudios





    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Zumindest nicht wenn du === verwendest. Wenn du == verwendest, sollte das gehen, ist aber schlechter Codestil. Also am besten die Anführungszeichen um die Nummern entfernen.
    developer.mozilla.org/de/docs/…heit_und_deren_Verwendung


    Du könntest auch anstatt deiner If-Else Struktur einfach document.body.backgroundImage =x+".jpg" schreiben wenn der Zufallsgenerator eh nur Werte zwischen 1 und 9 ausspuckt.


    Edit: Grad gesehen, dass du background-image schreibtst. Das ist falsch und wird dir einen Fehler werfen. Die richtige Eigenschaft heißt ".backgroundImage" w3schools.com/jsref/prop_style_backgroundimage.asp


    Edit2: Außerdem kann es sein das du "url('X.jpg')" verwenden musst damit das funktioniert

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Marcel1997“ ()

    bau dir ein Array mit den Bildnamen

    Quellcode

    1. var myImages = [ "meinErstesBild.jpg", "meinZweitesBild.jpg", "meinDrittesBild.jpg" ];


    generiere dir deine RandomNumber

    Quellcode

    1. var random = Math.floor((Math.random() * 3));


    setze das Bild als Background

    Quellcode

    1. document.body.backgroundImage = "url('" + myImages[random]; + "')";


    und siehe da.. alles ohne 10 If-Then-Else und in 3 Zeilen xD


    LG, Acr0most
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup:
    Ich kenne mich mit JS zwar auch nicht aus, aber was ich weiß ist, dass zumindest Chrome (wahrscheinlich auch Firefox) JavaScript debuggen kann wie in VS. Das solltest du nutzen dann wärst du ziemlich schnell auf die Lösung gekommen weil er nämlich in keine der If-Bedingungen rein gegangen wäre.

    seh schrieb:

    ... JavaScript debuggen ... Das solltest du nutzen dann wärst du ziemlich schnell auf die Lösung gekommen ...

    Das kann ich nur unterstreichen, ist ja skandalös, was du uns hier kredenzt ! :D

    Meine Empfehlung ist, VS Code zu nutzen, ist mitlerweile mein Lieblingstexteditor !

    Übrigens, Javascript im Html Dokument, empfinde ich grundsätzlich als schlechten Programmierstil, Javascript gehört in eine .js Datei.
    Danke für eure Antworten, habe mich schliesslich für Acr0most's Variante Entschieden. Nur bekomme ich es immernoch nicht zum laufen :huh: X/

    HTML-Quellcode

    1. <html><head>
    2. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    3. <title>Error 404</title></head>
    4. <script>
    5. function loadImage() {
    6. var myImages = [ "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.png", "9.png" ];
    7. var random = Math.floor(Math.random() * 11);
    8. document.body.backgroundImage = "url('" + myImages[random]; + "')";
    9. }
    10. </script>
    11. <body>
    12. <body onload="loadImage()">
    13. </body></html>


    Immer noch keine Ausgabe. Bilder sind vorhanden und auch aufrufbar. Irgendwas muss ich doch übersehen?


    ---
    Mach ich eig ungerne aber hier mein FTP Server auf dem ich es hochgeladen habe:
    Verzeichnis:
    maxestudios.bplaced.net/404/
    Html File:
    maxestudios.bplaced.net/404/404site.html

    (Soll eine 404 Seite werden, .htaccess und so, die Bilder sollen halt zufällig gewählt werden)
    Viel Erfolg,
    MaxeStudios





    wo liegen deine Images?
    Die musst du wenn dann über eine URL aufrufen können.

    Leg dir die auf irgendeinen Proxy (oder eben in dein htdocs, oder wo auch immer die Daten für deinen Webserver liegen.

    Dann machst du bspw. [http://localhost/1.jpg

    wenn du im Browser dann dein Bild siehst, musst du das auch so als Bild-URl speichern, sprich in deinem Array wird aus
    1.jpg -> [http://localhost/1.jpg

    (Ersetze localhost mit deinem Server, wenn du nicht bei dir lokal arbeitest)

    LG, Acr0most
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup:

    MaxeStudios schrieb:

    Irgendwas muss ich doch übersehen?

    So ist es, du ignorierst wesentliche Hinweise und Ratschläge !
    Besorge dir einen Debugger und lerne selbständig zu arbeiten ! ;)
    1) html ist kein gültiger Parent für script --> in body oder head verschieben.
    2) Eine saubere Struktur hilft bzw. schadet nicht: <html><head>...</head><body>...</body> anstatt <html><head>...</head>...<body> <body onload="..."></body></html>​
    3) document.body ist von der Sache her nur bedingt korrekt und funktioniert unter bestimmten Bedingungen nicht, "richtiger" wäre document.getElementsByTagName("body")[0]
    4) body hat kein Attribut backgroundImage. Es hat aber das Attribut style, welches ein entsprechende Property besitzt --> document.getElementsByTagName("body")[0].style.backgroundImage

    Edit: Gehört das nicht in das "Weiteren Sprachen"-Unterforum?
    Edit 2: Math.floor(Math.random() * 11); liefert ganzzahlige Werte zwischen 0 und 10. Das Array enthält aber nur 9 Einträge...

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „3daycliff“ ()

    Hi,

    @MaxeStudios beachte was @3daycliff sagte.

    Hier ein Beispiel-Code: codepen.io/anon/pen/PaVgBz (du musst natürlich dafür sorgen dass die Bilder auch existieren und ggf. den Pfad dorthin anpassen).


    Link :thumbup:


    www.marius-gerum.de
    PHP lernen | Programmierung | Sonstiger Krempel
    Zum Blog | PHP lernen | GitHub | Gists | List of awesome

    Danke, habs inzwischen schon hinbekommen :D
    (Hatte vergessen den Thread als Erledigt zu markieren)


    lg
    Viel Erfolg,
    MaxeStudios