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