Warum funktioniert dieser code nicht?

3 Antworten

Babelfish
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, JavaScript, Webentwicklung
30.10.2023, 11:18

Welche Fehlermeldung kommt denn? Ich tipp mal darauf, dass body nicht gefunden werden kann, da es das an dieser Stelle vom Script noch gar nicht gibt.

Am einfachsten ist es, wenn du den ganzen Script-Block ans Ende und vor das schließenden </body> verschiebst:

<script>
…
</script>
</body>

Ein zweiter Fehler ist, dass es background-color in Javascript nicht gibt:

bodyElement.style.backgroundColor = "green";

Bitte mal in die Doku schauen:

https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp
Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.
ZaoDaDong
30.10.2023, 11:11

Du musst die Variable bodyElement aktualisieren, wenn du sie bearbeiten willst.

So z.b.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
         

        function setColorBlue() {
            bodyElement = document.querySelector("body");
            bodyElement.style.backgroundColor = "blue";
        }

        function setColorRed() {
            bodyElement = document.querySelector("body");
            bodyElement.style.backgroundColor = "red";
        }

        function setColorGreen() {
            bodyElement = document.querySelector("body");
            bodyElement.style.backgroundColor = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>
    </div>
</body>
</html>
SusgUY446 
Beitragsersteller
 30.10.2023, 11:11 
ich hab jetzt diesen code verwendet aber trozdem danke. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        

        function setColorBlue() {
            document.body.style.backgroundColor = "blue";
        }

        function setColorRed() {
            document.body.style.backgroundColor = "red";
        }

        function setColorGreen() {
            document.body.style.backgroundColor = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>
    </div>
</body>
</html>
Rolajamo
30.10.2023, 11:00

Versuchs mal damit:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.style.backgroundColor = "blue";
        }

        function setColorRed() {
            bodyElement.style.backgroundColor = "red";
        }

        function setColorGreen() {
            bodyElement.style.backgroundColor = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>
    </div>
</body>
</html>
SusgUY446 
Beitragsersteller
 30.10.2023, 11:03

funktioniert auch nicht

SusgUY446 
Beitragsersteller
 30.10.2023, 11:07
@ZaoDaDong

das sich die hintergrund farbe ändern lässt. hat sich jetzt aber erledigt.

Babelfish  30.10.2023, 11:41
@ZaoDaDong

document.querySelector("body")

… funktioniert im HEAD nicht, da im DOM das BODY-Element noch gar nicht existiert.