Problem ze zmianą kolorów

0

Mam następujący problem. Mam program który tworzy rysunek używając prostych figur stworzonych w divach. Chcę by po naciśnięciu na danego diva zmienił się kolor jego tła. na razie mam coś takiego:

<html>
    <head>
        <title>Robot</title>
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript"> 
            const divs = document.querySelectorAll('div');
            divs.forEach(function (div)
            {
                div.addEventListener('click', changeColor)
            })
            function changeColor() 
            {
            document.body.className = this.className; //tutaj mam problem, nie wiem jak to zapisać

            }
        </script>
    </head>
    <body>
        <div class='brown'> </div>
        <div class="green"></div>
        <div class="blue"></div>
        <div class="purple"></div>
        <div class="yellow"></div>
        <div class="lightgray"><h1>I <3 JS</h1></div>
        <div class="black"></div>
        <div class="pink"></div>

    </body>

</html>

A tutaj css

div {
   cursor: pointer;

}
.brown{ 
    background-color: lightgray;
    width:200px;
    height: 200px;
    border-radius: 15px 15px 15px 15px;
    position:fixed;
    right: 50%;
}
.green{
    background-color: blue;
    width:50px;
    height: 50px;
    border-radius: 50%;
    position:fixed;
    right:58%;
    top: 5%;
}
.blue{
    background-color: blue;
    width:50px;
    height: 50px;
    border-radius: 50%;
    position:fixed;  
    right:52%;
    top: 8%;
}
.purple{
    width:20px;
    height:20px;
    background-color:black;
    position:fixed;
    right:56%;
    top: 14%;
}
.yellow{
    background-color:red;
    width: 100px;
    height:25px;
    position:fixed;
    right:53%;
    top: 20%;
}
.lightgray{
    background-color: lightgray;
    width:400px;
    height: 400px;
    position:fixed;
    right: 43%; 
    top:28%;
    text-align:center;

}
h1{
    line-height:1000%;
}
.black{
    background-color: gray; 
    width:200px;
    height: 40px;  
    position:fixed;
    right:29.7%;
    top:28%;
}
.pink{
    background-color: gray;
    width:40px;
    height: 200px;   
    position:fixed;
    right: 69.7%;
    top:28%;
}
3

https://jsfiddle.net/mkcoa5s9/6/

Ustawiłem na czarny, ale możesz zmienić wedle uznania. Możesz też usunąć, lub zmienić obecną klasę diva.

0

Dziękuje za pomoc. Mam tylko jeszcze jedno pytanko, jak wrzuciłem część js to wyskoczył taki błąd "The keyword 'const' is reserved"

1

@Dark Reaper: zmień const na let i przenieś tag <script> na koniec body przed </body>

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0