Bachforelle: Einfaches Randomize-String-Skript geht nicht

Hallo zusammen.

Hier ist ein Javascript vorgestellt: http://jsfiddle.net/f437y65x/light/

==> Ich möchte, dass mit einem Aufruf/Reload der HTML-Seite der String in einem Textfeld steht.

Aber das hier in einer javascript.html abgespeichert, funktioniert nicht. Der String erscheint nicht.

<html>
<head>

 <script type='text/javascript'>

function randString(x){
    var s = "";
    while(s.length<x&&x>0){
        var r = Math.random();
        s+= (r<0.1?Math.floor(r*100):String.fromCharCode(Math.floor(r*26) + (r>0.5?97:65)));
    }
    return s;
}

document.getElementById("foo").value = randString(10);

</script>
</head>

<body>

<textarea id='foo' style='width:100%;height:200px'></textarea>

</body>
</html>  

Für jede Hilfe bedanke ich mich.

  1. @@Bachforelle

    Ich vermute jetzt mal, dass textarea den Text als Elementinhalt haben möchte, nicht im value-Attribut.

    Warum überhaupt textarea? textarea ist ein Eingabe-Element, nicht für Ausgaben.

    LLAP

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Bachforelle

      Ich vermute jetzt mal, dass textarea den Text als Elementinhalt haben möchte, nicht im value-Attribut.

      Warum überhaupt textarea? textarea ist ein Eingabe-Element, nicht für Ausgaben.

      LLAP

      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

      Das ist schon ok mit dem Eingabefeld, denn der Wert soll später aus dem Feld als Formular übergeben werden. In der Beispielseite funktioniert es ja, nur der Quelltext daneben lässt das Beispiel nicht reproduzieren. Ich möchte lediglich, dass es genauso funktioniert, wie auf dieser Seite.

      1. Könnte jemand den Code bitte korrigieren, dass er funktionsfähig den Wert in das Textfeld überträgt? Das kann doch nicht so kompliziert sein.

        1. Das kann doch nicht so kompliziert sein.

          Anscheinend schon. Andernfalls könntest du's ja ohne fremde Hilfe selbst machen.

          lg

  2. Aber das hier in einer javascript.html abgespeichert, funktioniert nicht. Der String erscheint nicht.

    Natürlich nicht. Du rufst deine Funktion randString auch nirgends auf.

    Bei deinem auf jsfiddle verlinkten Code ist in der linken Spalte onLoad ausgewählt. D.h., wie der Name schon vermuten lässt, dass das Script nach dem Laden der Seite sofort aufgerufen wird.

    Bei deinem -hier geposteten- Script fehlt jedoch dieser Funktionsaufruf.

    Es gibt verschiedene Wege dieses Funktionsaufruf zu realisieren:

    window.onload = function(){
    	console.log("ausgefuehrt");
    };
    

    oder so:

    function deineFunktion () {
       console.log("ausgefuehrt");
    }
    document.addEventListener("load", deineFunktion, false);
    

    oder so:

    <body onLoad="deineFunktion()">
    

    u.s.w.

    1. @mark: Das ist schon mal ein guter Hinweis.

      Bei

      <html>
      <head>
      
       <script type='text/javascript'>
      
      function randString(x){
          var s = "";
          while(s.length<x&&x>0){
              var r = Math.random();
              s+= (r<0.1?Math.floor(r*100):String.fromCharCode(Math.floor(r*26) + (r>0.5?97:65)));
          }
          return s;
      }
      
      document.getElementById("foo").value = randString(10);
      
      </script>
      
      </head>
      
      
      
      <body onLoad="randstring()">
      
      
      
      <textarea id='foo' style='width:100%;height:200px'></textarea>
      
      </body>
      </html>
      

      passiert allerdings auch nichts. Was ist jetzt noch falsch?

      1. Groß und Kleinschreibung beachten: "randstring()" ist nicht gleich "randString()".

        lg

        1. Groß und Kleinschreibung beachten: "randstring()" ist nicht gleich "randString()".

          lg

          Auch das schafft keine Abhilfe. Könntest du evtl. den Code mal in ein HTML tun und testen? Weil irritiert bin, dass es bei mir nicht klappt.

          1. Auch das schafft keine Abhilfe.

            ... ach, das hab ich übersehen:

            Folgender Code:

            document.getElementById("foo").value = randString(10); 
            

            schreibt den String in deine Textarea. Er befindet sich jedoch außerhalb deiner Funktion und wird deshalb nicht mit der Funktion aufgerufen.

            Weiters benötigt die Funktion einen Parameter, der die Länge der Zeichenkette festlegt, wenn du diesen nicht setzt liefert die Funktion einen Leerstring.

            Du musst also document.getElementById("foo").value in deine Funktion packen und bei <body onLoad="printRandString()"> eine Zahl an die Funktion übergeben.

            lg

            So z.B.:

            <!DOCTYPE html>
            <html>
            <head>
            
            <script type='text/javascript'>
            function printRandString(x){
                var s = "";
                while(s.length<x&&x>0){
                    var r = Math.random();
                    s+= (r<0.1?Math.floor(r*100):String.fromCharCode(Math.floor(r*26) + (r>0.5?97:65)));
                }
            	console.log(s);
                document.getElementById("foo").value = s;
            }
            </script>
            
            </head>
            
            <body onLoad="printRandString(10)">
            <textarea id='foo' style='width:100%;height:200px'>dsf</textarea>
            
            </body>
            </html>
            
      2. @@Bachforelle

        … passiert allerdings auch nichts. Was ist jetzt noch falsch?

        Das Script ist im head. Wenn es ausgeführt wird, existiert noch kein Element mit der ID "foo".

        LLAP

        PS: Den Wert ¨ber die value-Eigenschaft zu setzen funktioniert.

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. @@mark

      Es gibt verschiedene Wege dieses Funktionsaufruf zu realisieren:

      Die in ihrer Sinnhaftigkeit stark variieren.

      Den letzten

      <body onLoad="deineFunktion()">
      

      vergessen wir mal gleich wieder. JavaScript-Code sollte nicht im HTML stehen (separation of concerns).

      window.onload = function(){
      	console.log("ausgefuehrt");
      };
      

      Und wenn window.onload schon mit einer Funktion vorbelegt ist? Dann wird das einfach so verworfen und überschrieben?

      on…-Eigenschaften vergessen wir am besten auch gleich.

      oder so:

      function deineFunktion () {
         console.log("ausgefuehrt");
      }
      document.addEventListener("load", deineFunktion, false);
      

      Nichts „oder“. So.

      Alte IEs, die addEventListener() noch nicht verstehen, sollten kaum noch ein Thema sein. Oder wenn, muss man denen eben ihre Syntax anbieten.

      LLAP

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. @Gunnar: Danke für deine Erläuterungen.

        @Bachforelle: Gunnar hat da natürlich recht.

        1. Das hat jetzt gut funktioniert, ganz herzlichen Dank :-).

          Eine Frage noch: Wie muss ich das Skript variieren, wenn ich nur vordefinierte Zeichen in einer bestimmten Reihenfolge wiedergegeben haben will?

          function printRandString(x){
              var s = "";
              while(s.length<x&&x>0){
                  var r = Math.random();
                  s+= (r<0.1?Math.floor(r*100):String.fromCharCode(Math.floor(r*26) + (r>0.5?97:65)));
              }
          	console.log(s);
              document.getElementById("bestellnummer").value = s;
          }
          

          Statt zMwLy2 MCovnx usw.

          soll es ausgeben:

          ZTQ-23782 AWB-93849

          also 3 Großbuchstaben, Bindestrich und dann 5 Zahlen.

          Das wäre absolut hervorragend, wenn ihr da noch kurz Hilfe geben könntet :-) .

          1. @@Bachforelle

            soll es ausgeben:

            ZTQ-23782
            AWB-93849

            also 3 Großbuchstaben, Bindestrich und dann 5 Zahlen.

            Also der Reihe nach: zuerst 3 Großbuchstaben. Da die Anzahl der Schleifendurchläufe von vornherein bekannt ist, kommt eine for-Schleife in Betracht, keine while-Schleife.

            Innerhalb der Schleife ziehst du eine Zufallszahl x; die ist aus dem Intervall [0, 1[, d.h. 0 ≤ x < 1. Wenn du die nun mit der Anzahl der möglichen Buchstaben (von A bis Z sind’s 26) multipliziert, erhältst du eine Zahl aus [0, 26[. Davon nimmst du den ganzzahligen Anteil und erhältst eine Zahl aus {0, 1, 2, …, 25}.

            'A' hat den Codepoint U+0041. Wenn du also zu deiner Zahl x41 = 65 dazuaddiert, erhältst eine Zahl aus {x41, x42, x43, …, x5A}, die du in ein Zeichen aus {'A', 'B', 'C', …, 'Z'} umwandelst.

            [Ende der Schleife]

            Den Bindestrich hinzuzufügen sollte nicht das Problem sein.

            Nun eine Schleife für die Ziffern, von denen es nicht 26 mögliche, sondern 10 gibt. Der Offset, um von den Zahlen 0 bis 9 auf die Zeichen '0' bis '9' zu kommen, wäre x30. ('0' hat den Codepoint U+0030.) [Ende der Schleife]

            Du kannst natürlich auch gleich deine Zufallszahl mit 10⁵ = 100000 multiplizieren und sparst die zweite Schleife.

            Hätte man bei der ersten Schleife auch machen können, d.h. gleich mit 26³ multiplizieren und die Zahl in 3 Zeichen umwandeln. Das dürfte aber für dich komplizierter sein.

            LLAP

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. @Gunnar:

              Hätte man bei der ersten Schleife auch machen können, d.h. gleich mit 26³ multiplizieren und die Zahl in 3 Zeichen umwandeln. Das dürfte aber für dich komplizierter sein.

              wie macht man das in Javascript. toString(36) liefert ja Zahlen und (!) Buchstaben.

              @Bachforelle:

              beide Beispiele sind an Gunnars Vorgaben angelehnt.

              so:

              <!DOCTYPE html>
              <html>
              <head>
              
              <style type="text/css">
              #bestellnummer{	
              	width: 100%;
              	height: 200px;
              	font-size: 15em;
              }
              </style>
              
              <script type='text/javascript'>
              function printRandString(){
                  var s = "";
              	for (i=0;i<9;i++){
              		var r = Math.random();
              		if(i < 3){
              			s += String.fromCharCode(65 + Math.floor(r * 26));
              		}else if(i == 3){
              			s += "-";
              		}else if(i > 3){
              			s += String.fromCharCode(48 + Math.floor(r * 10));
              		}
                  }
              	
                  document.getElementById("bestellnummer").value = s;
              }
              
              
              window.addEventListener("load", printRandString, false);
              </script>
              
              </head>
              
              <body>
              <textarea id="bestellnummer"></textarea>
              </body>
              </html>
              

              oder so:

              <!DOCTYPE html>
              <html>
              <head>
              
              <style type="text/css">
              #bestellnummer{	
              	width: 100%;
              	height: 200px;
              	font-size: 15em;
              }
              </style>
              
              <script type='text/javascript'>
              function printRandString(){
              	var rz = Math.random().toString().substr(2,5);
              	var rb = Math.random().toString(36).replace(/\d/g,'').slice(-3).toUpperCase();
              	
                  document.getElementById("bestellnummer").value = rb + "-" + rz;
              }
              
              window.addEventListener("load", printRandString, false);
              </script>
              
              </head>
              
              <body>
              <textarea id="bestellnummer"></textarea>
              </body>
              </html>