JavaScript: Bibliothek - Random
Es ist an der Zeit unsere Bibliothek zu erweitern.
Da ich unter Kunst mit Internet sehr viel mit
Random arbeite habe ich mir gedacht, meine Bibliothek etwas aufzufrischen.
Von daher möchte ich eine Random-Funktion in unserer bib.js einbinden.
Warum sollten wir das tun?
Dadurch verschlanken wir unseren eigentlichen Code und natürlich
haben wir so einen weiteren Baustein um den wir uns in Zukunft nicht mehr kümmern müssen.
Doch zuerst sehen wir uns unser Random genauer an.
Es soll einfach einen zufälligen Wert zwischen einem Minimum und Maximum Wert ausgeben.
Math.floor( Math.random() * ( max - min + 1 ) ) + min;
Von daher benötigen wir eine Funktion, welche 2 Parameter übernehmen muss
(min und max) und den ermittelten Wert zurückgibt.
function getRandom( min, max ){ let val = Math.floor( Math.random() * ( max - min + 1 ) ) + min; return val; }
So weit so gut aber was ist, wenn ich unsere
getRandom aus einer Schleife heraus aufrufe und vermeiden möchte,
dass sie 2 gleiche Werte hintereinander ausgibt.
Für diesen Fall erweitern wir die Funktion um eine kleine IF-Anweisung und
einer Variablen randomTemp die sich den ermittelten Wert temporär merkt.
let randomTemp = ''; function getRandom( min, max ){ let val = Math.floor( Math.random() * ( max - min + 1 ) ) + min; // Prüfen auf Wiederholung if( val === randomTemp ) { randomTemp = val; // Rekursion falls gleicher Wert return getRandom( min, max ); } randomTemp = val; return val; }
Das sollte es auch schon gewesen sein.
Der Aufruf sieht dann aus wie folgt:
getRandom( 0, 10 )
Ach ja, interessant dürfte der onclick in unserem Button sein:
onclick=" getObj( '#ausgabe' ).innerText = getRandom( 0, 10 ); "
Wenn Ihr Anregungen oder Kommentare habt, seid so nett und kontaktiert mich unter: Kontakt
Kopiert Euch gerne den Code und probiert es aus: Code
Code
HTML: <div id="target"> <span>Ausgabe der Zufallszahl:</span><br> <div id="ausgabe" class="fett commentar"></div> </div> ... <button id="buttonid" class="ancor_button" name="buttonname" onclick=" getObj('#ausgabe').innerText = getRandom( 0, 10 ); "> Zufallszahl aus 0 bis 10</button>
CSS: .commentar { color: rgba(112, 175, 4, 1); } .fett { font-weight: 600; }
JavaScript: bib.js: /* START::: getObj() */ function getObj ( identifier ) { const idfName = identifier; // Element speichern const myElem = document.querySelectorAll(idfName); // Rückgabe des Elementes if ( myElem.length === 1 ){ // Element ist eindeutig return myElem[0]; } else { // Mehrere Elemente vorhanden => Rückgabe Array return myElem; } } /* ENDE::: getObj() */ /* START::: Random */ let randomTemp = ''; function getRandom( min, max ){ let val = Math.floor( Math.random() * ( max - min + 1 ) ) + min; // Prüfen auf Wiederholung if( val === randomTemp ) { randomTemp = val; // Rekursion falls gleicher Wert return getRandom( min, max ); } randomTemp = val; return val; } /* ENDE::: Random */