Skocz do zawartości

Problem ze zmianą kolorów


BloodMower

Recommended Posts

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>

Link do komentarza
Udostępnij na innych stronach

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.

Link do komentarza
Udostępnij na innych stronach

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wkleiłeś zawartość bez formatowania.   Usuń formatowanie

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Utwórz nowe...