JavaScript: Baue eine Bibliothek

Schritt 1: Wir erstellen uns die Datei namens: bib.js und binden sie ein in einen Ordner namens z.B. js.

Schritt 2: Wir erstellen uns eine Funktion namens getObj().
Das wäre ja schon einmal kürzer als z.B. document.getElementsByClassName().

Schritt 3: Eine Unterscheidung zwischen ID, Klassenname und TAG-Name des Elementes.
Das machen wir auf bekannte Weise und verwenden die Schreibweise für den querySelector():
'#name', '.name' und 'tag-name' oder z.B. 'input[ name = " email " ]'.

Schritt 4: Als Parameter übergeben wir z.B. für die ID getObj( '#id-name' ) oder
den Klassennamen getObj( '.class-name' ) des Elementes mit dem wir arbeiten möchten.

Schritt 5: Eine Unterscheidung des jeweiligen Identifiers in unser Funktion getObj().
Dies erledigt die IF-Anweisung. Sie erkennt ob das gesuchte Element nur einmal oder mehrmals vorhanden ist. Je nachdem geben wir das Element oder ein Array mit den gefundenen Elementen zurück.


Sehen wir doch mal, ob unsere getObj() funktioniert.
In unserem Beispiel möchte ich den Namen des Buttons ausgeben. Dies sollte jetzt eigentlich gehen wie folgt:
onclick="getObj( '#ausgabe' ).innerText = getObj( '#buttonid' ).name"
Zum Vergleich:
onclick="document.querySelector( '#ausgabe' ).innerText = document.querySelector( '#buttonid' ).name"

Wenn Ihr Anregungen oder Kommentare habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code

HTML:

<div id="target">
	<span>Der Name des Buttons ist:</span><br>
	<div id="ausgabe" class="fett commentar"></div>
</div>
...
<button id="buttonid" class="ancor_button" name="buttonname"
onclick=" getObj('#ausgabe').innerText = getObj('#buttonid').name; ">
Gib mir meinen Namen</button>





CSS:

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

.fett {
    font-weight: 600;
}



JavaScript: bib.js:

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;
	}
}