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:
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
