Когда я нажимаю на круглые кнопки, цвет фона квадрата должен измениться. Но Функция в JS не работает??
function orange() {
document.getElementsByClassName("rectan").style.backgroundColor = "#FFAD00FF";
}
function blue() {
document.getElementsByClassName("rectan").style.backgroundColor = "#5800B8FF";
}
function green() {
document.getElementsByClassName("rectan").style.backgroundColor = "#00B821FF";
}
* {
margin: 0;
padding: 0;
text-decoration: none;
background-color: #9CFFFFFF;
}
.rectan {
border: 6px solid white;
width: 300px;
height: 150px;
border-radius: 30px;
margin-left: 40px;
margin-top: 40px;
background-color: #5800B8FF;
box-shadow: 5px 5px 10px #ccc;
text-align: center;
}
.dots1 {
background-color: #FFAD00FF;
}
.dots2 {
background-color: #5800B8FF;
}
.dots3 {
background-color: #00B821FF;
}
.dots1,
.dots2,
.dots3 {
float: left;
border: 6px solid white;
width: 40px;
height: 40px;
border-radius: 40px;
box-shadow: 5px 5px 10px #ccc;
}
.dots2,
.dots3 {
margin-left: 15px;
}
.dots {
display: inline-block;
margin-top: 180px;
}
<!DOCTYPE html>
<html>
<head>
<title>lol</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="colorswap">
<div class="rectan">
<div class="dots">
<div class="dots1" onclick="orange()"></div>
<div class="dots2" onclick="blue()"></div>
<div class="dots3" onclick="green()"></div>
</div>
</div>
</div>
</body>
</html>