Der rote Text kommt aus einer CSS-Class:
Hier steht in diesem Text der Inhalt einer JavaScript-Variable in blau: Danach schreibe ich einfach weiter.
Hier steht in diesem Text der Inhalt einer JavaScript-Variable in grün: Danach schreibe ich einfach weiter.
Wenn ich eine Class verwende, kann ich die gleiche Variable mehrmals auf der gleichen Seite anwenden. Das geht natürlich nicht mit einer ID, da eine ID immer einmalig ist:
Hier steht in diesem Text der Inhalt einer JavaScript-Variable in rot: Danach schreibe ich einfach weiter.
Wenn ich eine Class verwende, kann ich die gleiche Variable mehrmals auf der gleichen Seite anwenden. Das geht natürlich nicht mit einer ID, da eine ID immer einmalig ist:
Es besteht der Wunsch, Texte in einem Projekt, möglicherweise sogar auf mehreren Seiten, über Variablen ändern zu können. Dadurch müssen diese Texte nur zentral einmal geändert werden und nicht an vielen Stellen der Webseite.
Hierfür habe ich drei Beispiele erstellt, eines über CSS und zwei über JavaScript.
Hier habe ich beispielhaft eine CSS class="myGlobalClass" mit Inhalt (content) erstellt, die folgende Anweisungen enthält:
<!-- CSS Class with Content -->
<style>
.myGlobalClass::after {
content: "This text is a CSS Class.";
display: inline-flex;
color: red;
}
</style>
Durch den Selektor ::after (danach) wird der Text immer an das Ende eines vorhandenen Absatzes geschrieben. Damit der Text aber überhaupt angezeigt wird, muss angegeben werden wo, also wie hier danach oder ::before (davor).
Diese Style-Anweisung gehört entweder in die "Globale HTML" der Site-Einstellungen oder in den Bereich "Inside <head> code:" der Seiten-Einstellungen.
Den Text ändert man dann an der CSS-Eigenschaft "content". Fügt die class="myGlobalClass" noch hinzu:
<p class="mbr-text mbr-fonts-style myGlobalClass" data-app-selector=".mbr-text" mbr-theme-style="display-7">Der rote Text kommt aus einer CSS-Class:
</p>
Eine wahrscheinlich sehr viel bessere Lösung ist die Darstellung des Textes über JavaScript.
Hierfür habe ich folgendes JavaScript erstellt, das auch entweder in die "Globale HTML" der Site-Einstellungen oder in den Bereich "End of <body> code" der Seiten-Einstellungen gehört.
<!-- JavaScript Content Variable via ID -->
<script>
let name1 = "Germany";
let name2 = "World";
document.getElementById("myText").innerHTML = "Hello, " + name1 + " and the rest of the " + name2 + "!";
</script>
Die Texte ändert ihr an den "let" (Variablen). Ihr könnt natürlich Variablen hinzufügen oder entfernen. Innerhalb meines Textes im Mobirise-Block habe ich einem <span> Bereich </span> meine id="myText" gegeben, auf die sich das Skript bezieht.
<p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
Hier steht in diesem Text der Inhalt einer JavaScript-Variable in blau: <span id="myText"></span> Danach schreibe ich einfach weiter.</p>
Eine weitere Lösung ist die Darstellung des Textes über JavaScript, jedoch diesmal als CSS-Class. Das hat den Vorteil, dass die gleiche Variable mehrmals auf der gleichen Seite angewendet werden kann. Eine ID darf dagegen immer nur einmalig auf der gleichen Seite Anwendung finden.
Hierfür habe ich folgendes JavaScript erstellt, das auch entweder in die "Globale HTML" der Site-Einstellungen oder in den Bereich "End of <body> code" der Seiten-Einstellungen gehört.
<!-- JavaScript Content Variable via Class -->
<script>
let content1 = "Dieser Text kommt von zwei Variablen, ";
let content2 = "die über einen Class-Namen dargestellt werden.";
window.onload = function myFunction() {
const list = document.getElementsByClassName("changeText");
for (let i = 0; i < list.length; i++) {
list[i].innerHTML = content1 + content2;
}
}
</script>
Die Texte ändert ihr an den "let" (Variablen). Ihr könnt natürlich Variablen hinzufügen oder entfernen. Innerhalb meines Textes im Mobirise-Block habe ich einem <span> Bereich </span> meine class="changeText" gegeben, auf die sich das Skript bezieht.
<p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
Wenn ich eine Class verwende, kann ich die gleiche Variable mehrmals auf der gleichen Seite anwenden. Das geht natürlich nicht mit einer ID, da eine ID immer einmalig ist: <span class="changeText"></span>
</p>
Eine weitere Lösung ist die Darstellung des Textes über JavaScript, jedoch hier mit der Methode "querySelectorAll()" und auch einer CSS-Class.
Vielen Dank für den Tipp von den Forum-Nutzern "Singa4real" und "Witsec".
Dieses Skript erscheint mir am besten geeignet zu sein. Die JavaScript Methode "querySelectorAll()" gibt alle Elemente zurück, die einem oder mehreren CSS-Selektoren entsprechen. In diesem Beispiel die class="myQuery"
Hierfür habe ich folgendes JavaScript erstellt, das auch entweder in die "Globale HTML" der Site-Einstellungen oder in den Bereich "End of <body> code" der Seiten-Einstellungen gehört.
<!-- JavaScript Content Variable via querySelectorAll method -->
<script>
document.querySelectorAll('.myQuery').forEach(item => { item.innerHTML = "Your defined text here"; })
</script>
Die Text habe ich hier direkt in das Skript geschrieben. Innerhalb meines Textes im Mobirise-Block habe ich einem <span> Bereich </span> meine class="myQuery" gegeben, auf die sich das Skript bezieht.
<p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
Wenn ich eine Class verwende, kann ich die gleiche Variable mehrmals auf der gleichen Seite anwenden. Das geht natürlich nicht mit einer ID, da eine ID immer einmalig ist: <span class="myQuery"></span>
</p>