Skocz do zawartości

BloodMower

Członkowie
 Wyświetl profil  Zobacz jego aktywność

  • Postów

    1

  • Dołączył

  • Ostatnio

 Typ zawartości 

Posty napisane przez BloodMower

  1. Problem ze zmianą kolorów

    w JavaScript

    Napisano

    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>

×
×
  • Utwórz nowe...