Hi SlowCoder,
und willkommen hier im Forum. Ich habe Fehler in deinem Code entdeckt. Du hast bei der If-Anweisung zu viele geschweifte Klammern verwendet. Und du hast nur die 'querySelector'-Methode verwendet. Das kann nur ein Element auswählen. Besser ist es wenn man mehrere Elemente mit der gleichen Klasse auswählen möchte die 'querySelectorAll'-Methode in Javascript zu verwenden. Hierbei werden dann alle Elemente ausgewählt die zum CSS-Selektor passen. Um dann jedes einzelne Elemente dann aus der Liste auszuwählen verwendest du eine 'forEach-Schleife'.
Diese Schleife wird ausgeführt bis alle Elemente dran kamen. Bei jedem Durchgang wird das nächste Element selektiert. In der Schleife können dann Javascript-Methoden durchgeführt werden. Dabei ist der erste Parameter in der anonymen Funktion innerhalb der forEach-Schleife das derzeitige Element. Indemfall habe ich es 'item' genannt.
Ich habe dein Code genommen verbessert und optimiert - hier mein Beispiel für dich:
Ich hoffe dir kann mein Code weiterhelfen, wenn du weitere Fragen zu dem Code-Beispiel von mir hast oder weitere Fragen hast, dann einfach ins Forum schreiben.
PS: Nicht vergessen unterhalb meines Beitrages einen Lilke geben wenn dir mein Beitrag gefällt.
Viele Grüße
rzscout
und willkommen hier im Forum. Ich habe Fehler in deinem Code entdeckt. Du hast bei der If-Anweisung zu viele geschweifte Klammern verwendet. Und du hast nur die 'querySelector'-Methode verwendet. Das kann nur ein Element auswählen. Besser ist es wenn man mehrere Elemente mit der gleichen Klasse auswählen möchte die 'querySelectorAll'-Methode in Javascript zu verwenden. Hierbei werden dann alle Elemente ausgewählt die zum CSS-Selektor passen. Um dann jedes einzelne Elemente dann aus der Liste auszuwählen verwendest du eine 'forEach-Schleife'.
Diese Schleife wird ausgeführt bis alle Elemente dran kamen. Bei jedem Durchgang wird das nächste Element selektiert. In der Schleife können dann Javascript-Methoden durchgeführt werden. Dabei ist der erste Parameter in der anonymen Funktion innerhalb der forEach-Schleife das derzeitige Element. Indemfall habe ich es 'item' genannt.
Ich habe dein Code genommen verbessert und optimiert - hier mein Beispiel für dich:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Switch</title>
<script type="text/javascript">
// Aktiviere den Strict-Modus
'use strict';
// Deklaration der Variablen außerhalb von Funktionen/Methoden, damit diese auch von überall erreichbar sind
var button_on_off, show_preis, btn_status;
// Ein Event-Listener der erst feuert, wenn das komplette DOM geladen wurde
document.addEventListener('DOMContentLoaded', init);
// Die Funktion die nach dem erfolgreichen laden des DOM ausgeführt wird
function init() {
// Zuweisung von Elementen zu Variablen
button_on_off = document.querySelector('#onoff');
show_preis = document.querySelectorAll('.showpreis'); // <-- Hier werden sämtliche Elemente mit der Klasse showpreis ausgewählt.
btn_status = false;
// Dieser Event wird auf den Button gelegt und führt Methoden durch, wenn der Button gedrückt wird
button_on_off.addEventListener('click', function() {
// Der darunter liegende Code Abschnitt ist eine Short-Hand-Variante einer IF-Anweisung
// Wenn btn_status gleich true dann mache daraus ein false sonst ein true
btn_status ? btn_status = false : btn_status = true;
// Das ist eine forEach-Schleife die die Liste der ausgewählten Elemente, einzelnd abarbeitet
show_preis.forEach( function(item) {
// item ist das aktuelle Element, das ausgewählt wurde.
// Der darunter liegenede Code-Abschnitt ist eine Shorthand-Variante von der IF-Anweisung
// Wenn btn_status = true dann Preis2 sonst Preis 1
btn_status ? item.textContent = "Preis 2" : item.textContent = "Preis 1";
});
});
}
</script>
</head>
<body>
<input type="button" id="onoff" value="Drück mich!">
<p class="showpreis"></p>
<p class="showpreis"></p>
<p class="showpreis"></p>
<p class="showpreis"></p>
</body>
</html>Ich hoffe dir kann mein Code weiterhelfen, wenn du weitere Fragen zu dem Code-Beispiel von mir hast oder weitere Fragen hast, dann einfach ins Forum schreiben.
PS: Nicht vergessen unterhalb meines Beitrages einen Lilke geben wenn dir mein Beitrag gefällt.
Viele Grüße
rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" 