Jump to content

Problem ze zmianą kolorów


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 to post
Share on other sites

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 to post
Share on other sites

Join the conversation

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

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

×
×
  • Create New...