Problem ze zmianą kolorów

Grudzień 7, 2020

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. Narazie mam coś takiego:

<code>
<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>
</code>

A tutaj css

<code>

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%;
}

</code>

Grudzień 7, 2020

W przypadku takich rzeczy polecam Ci nauczyć się obsługi debuggera wbudowanego w Chrome lub FireFoxa. Kliknij sobie prawym klawiszem myszki na stronie i wybierz Inspect Element. Potem przejdź do zakładki Sources.

Znajdź swój skrypt i zastaw pułapkę (breakpoint) na problematycznym fragmencie kodu. Użyj podglądu i śledzenia krokowego do wyłapania błędu.

Pomoże Ci to rozwiązać problemy w przyszłości, a nie tylko ten jeden i od razu będziesz miał podgląd czy twój kod nie wyrzuca błędów, bo każdy z nich będziesz miał zalogowany w konsoli błędów.

Zaloguj się

Problem ze zmianą kolorów

Recommended Posts

BloodMower

Link do komentarza

Udostępnij na innych stronach

Bartosz Wójcik

Link do komentarza

Udostępnij na innych stronach

Join the conversation

Przeglądaj

Aktywność