nicht angemeldet
Rolf B
Matthias Scharwies
Rolf B
Gunnar Bittersmann
Gunnar Bittersmann
Rolf B
Gunnar Bittersmann
Guten Abend,
ich bins schon wieder. Mit einer Frage eher aus dem Anfängerbereich. Vielleicht kompletter Nonsens. Mal gucken...
Ich habe die Funktion test(), mit der ich den Wert von data-a aus dem Absatz-Element ausgebe:
<!DOCTYPE html>
<html>
<body>
<p id="text" data-a="a" data-b="b" data-c="c">TEST</p>
<script>
const text = document.getElementById("text");
function test(element) {
let wert = element.dataset.a;
element.textContent = wert;
}
test(text);
</script>
</body>
</html>
Soweit kein Problem. Nun möchte ich aber nicht statisch data-a ausgeben, sondern die jeweilige dataset-Eigenschaft dynamisch in die Funktion packen:
function test(element, attribut) {
let wert = element.dataset.attribut;
element.textContent = wert;
}
test(text, "a");
Das funktioniert natürlich nicht, weil attribut keine Eigenschaft des dataset-Objekts ist, sondern a. Gibt es die Möglichkeit, hier eine Art Variable zu setzen, die die Eigenschaft enthält?
Ich kann natürlich auch innerhalb der Funktion entscheiden, was passieren soll...
function test(element, attribut) {
let wert;
if(attribut === "a") wert = element.dataset.a;
if(attribut === "b") wert = element.dataset.b;
element.textContent = wert;
}
test(text, "a");
Aber das ist viel redundantes Zeug. Vor allem in meinem Script, wo sich noch viel mehr wiederholt. Wo ich die datasets auch noch aus weiteren Elementen einsammele usw. Ich bekomms am Ende mit viel Schreibarbeit hin. Oder gibts für den mittleren Ansatz eine Lösung?
Gute Nacht
Nico
Hallo Nico R.,
ich schieb's ja schon ewig vor mir her. Unser Javascript OOP Tutorial im Wiki ist suboptimal, sonst würd ich darauf verlinken.
Aber für deine Frage hätte ich einen Teil meiner Baustelle in einem betretbaren Zustand:
https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/Objekte#Eigenschaften_indirekt_ansprechen
Falls ich das Ding doch mal fertigstelle und ins Main-Wiki übertrage:
function assignDataToElement(element, dataName) {
element.textContent = element.dataset[dataName];
}
Ein paar Plausis wären noch nützlich: ist element ein HTMLElement? Ist dataName ein String? Gibt's diesen data-Namen überhaupt?
function assignDataToElement(element, dataName) {
if (!(element instanceof HTMLElement)) return;
if (typeof dataName != "string") return;
if (!element.dataset.hasOwnProperty(dataName)) return;
element.textContent = element.dataset[dataName];
}
Rolf
Hallo Rolf,
ja Herrschaftszeiten, dis gibts joa ned, dis funktioniert. Ist doch immer ne gute Idee, hier nachzufragen.
Danke :-)
Servus!
Hallo Nico R.,
ich schieb's ja schon ewig vor mir her. Unser Javascript OOP Tutorial im Wiki ist suboptimal, sonst würd ich darauf verlinken.
Aber für deine Frage hätte ich einen Teil meiner Baustelle in einem betretbaren Zustand:
https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/Objekte#Eigenschaften_indirekt_ansprechen
Vielen Dank Rolf,
Könnte man diesen Teil nicht in den Artikel übertragen und am Ende des überarbeiteten Teils ein ToDo einfügen, das beschreibt
Ein paar Plausis wären noch nützlich: ist element ein HTMLElement? Ist dataName ein String? Gibt's diesen data-Namen überhaupt?
function assignDataToElement(element, dataName) { if (!(element instanceof HTMLElement)) return; if (typeof dataName != "string") return; if (!element.dataset.hasOwnProperty(dataName)) return; element.textContent = element.dataset[dataName]; }Dann würden auch Nutzer, die im Wiki stöbern, schon auf diese neuen Inhalte stoßén.
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
das Thema ist mir eingeschlafen - ich gucke mir das OOP Tutorial nochmal an und schaue, welche niedrigschwelligen Verbesserungen man hinbekommt.
Rolf
@@Rolf B
Ein paar Plausis wären noch nützlich: ist element ein HTMLElement? Ist dataName ein String? Gibt's diesen data-Namen überhaupt?
function assignDataToElement(element, dataName) { if (!(element instanceof HTMLElement)) return; if (typeof dataName != "string") return; if (!element.dataset.hasOwnProperty(dataName)) return; element.textContent = element.dataset[dataName]; }
Das kann man einfacher haben:
function assignDataToElement(element, dataName) {
if (element) {
element.textContent = element.dataset[dataName] ?? element.textContent;
}
}
sollte genügen.
🖖 Живіть довго і процвітайте
element.textContent = element.dataset[dataName] ?? element.textContent;
Was bedeutet denn das ?? an der Stelle?
Gruß Nico
@@Nico R.
element.textContent = element.dataset[dataName] ?? element.textContent;Was bedeutet denn das ?? an der Stelle?
Das ist der nullish coalescing operator.
🖖 Живіть довго і процвітайте
Hallo Gunnar,
Das ist der nullish coalescing operator.
Aah, interessant. Noch nie davon gehört oder es irgendwo gesehen. Sehr schön.
Gruß Nico
Hallo Nico R.,
ob null coalescing (??) und nullsafe (?. bzw. ?->) Operatoren zuerst in Java oder in C# eingeführt wurden, weiß ich nicht, aber aus dieser Ecke scheinen sie sich in diverse andere Sprachen auszubreiten. In JavaScript gibt's die mittlerweile auch.
Es lohnt, bei PHP die "Migrating from..."-Seiten durchzuschauen. https://www.php.net/manual/en/appendices.php
Rolf
@@Nico R.
const text = document.getElementById("text");
text ist kein glücklich gewählter Name für etwas, das keinen Text enthält, sondern ein Elementobjekt. Ich würde das Ding textElement nennen.
Statt document.getElementById("text") kannst du auch document.querySelector("#text") verwenden. Mit querySelector() hat man ein einheitliches Interface, um ein Element aus dem DOM zu suchen – egal ob per ID oder anderem Selektor. (Und mit querySelectorAll() eins für mehrere Elemente.)
🖖 Живіть довго і процвітайте
@@Gunnar Bittersmann
textist kein glücklich gewählter Name
Ergänzung:
function test(element, attribut) { let wert = element.dataset.attribut; element.textContent = wert; }
attribut ist kein glücklich gewählter Name für etwas, das kein HTML-Attribut ist. a ist keins, data-a ist eins.
@Rolf B hat das schon stillschweigend in dataName umbenannt, aber nicht die Begründung geliefert.
🖖 Живіть довго і процвітайте
Hallo Gunnar,
keine Sorge, das waren nur Fantasienamen für das Testscript ;-)
Gruß Nico