Mehrere HTML Texte gleichzeitig ändern

PHP-Code:

<?php 

<script type="text/javascript">

function onoff(){

currentvalue = document.getElementById("onoff").value;

if(currentvalue == "Off"){

{document.querySelector(".showpreis").innerHTML="Preis 1";}

}else{

{document.querySelector(".showpreis").innerHTML="Preis 2";}

}

}

</script>



<input type="button" value="On" id="onoff" onclick="onoff();">



<p class="showpreis"></p>

<p class="showpreis"></p>

<p class="showpreis"></p>

<p class="showpreis"></p>

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>