Random mit Objekt erstellen

Nun versuchen wir doch einfach die Random-Funktion in unserem Objekt bib einzubinden.

Das interessante hierbei dürfte sein, wie wir mit der Variablen randomTemp umgehen.

Aber sehen wir uns doch mal den Code genauer an.

bib_oop.js

function getObj(){

	...

	// Die Variable definieren wir gleich zu Beginn
	this.randomTemp = '';
	this.getRandom = function( min, max ){
		...
	};
}

Der Rest sollte ziemlich gleich sein, mit der einzigen Ausnahme der Variablen this.randomTemp und der Rekursion in der IF-Anweisung.
Darum richten wir unser Augenmerk auf genau diese.

bib_oop.js

function getObj(){
	// Merke den Wert temporär 
	this.randomTemp = '';
	...
	
	this.getRandom = function( min, max ){
		let val = Math.floor( Math.random() * ( max - min + 1 ) ) + min;
		// Prüfen auf Wiederholung
		if( val === this.randomTemp ) {
			this.randomTemp = val;
			// Rekursion falls gleicher Wert
			return this.getRandom( min, max );
		}
		this.randomTemp = val;
		return val;
	};
}

Das sollte es auch schon gewesen sein.
Der Aufruf sieht dann aus wie folgt: bib.getRandom( 0, 10 )

Sehen wir uns noch den onclick genauer an:
onclick=" bib.elem('#ausgabe').innerText = bib.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

Beispiel

Die Zufallszahl ist:

Code


HTML:

<div id="target">
	<span>Die Zufallszahl ist::</span><br>
	<div id="ausgabe" class="fett commentar"></div>
</div>
...
<button id="buttonid" class="ancor_button" name="buttonname"
onclick=" bib.elem('#ausgabe').innerText = bib.getRandom( 0, 10 ); ">
Zufallszahl aus 0 bis 10</button>





CSS:

.commentar {
    color: rgba(112, 175, 4, 1);
}

.fett {
    font-weight: 600;
}



JavaScript: bib_oop.js:

function getObj(){
	// die Methode elem übernimmt an dieser Stelle die Arbeit
	this.elem =  function( identifier ) {
		// Element speichern
		const myElem = document.querySelectorAll( identifier );
		
		// Rückgabe des Elementes
		if ( myElem.length === 1 ) { 
			// Element ist eindeutig => ID oder 
			// es wurde nur ein Element gefunden
			return myElem[0];
		} else { 
			// Mehrere Elemente vorhanden => Rückgabe Array
			return myElem;
		}
	};
	
	// Merke den Wert temporär 
	this.randomTemp = '';
	this.getRandom = function( min, max ){
		let val = Math.floor( Math.random() * ( max - min + 1 ) ) + min;
		// Prüfen auf Wiederholung
		if( val === this.randomTemp ) {
			this.randomTemp = val;
			// Rekursion falls gleicher Wert
			return this.getRandom( min, max );
		}
		this.randomTemp = val;
		return val;
	};
}

// Initialisierung des Objektes getObj()
const bib = new getObj();