Q:

не работает JavaScript функция

Когда я нажимаю на круглые кнопки, цвет фона квадрата должен измениться. Но Функция в 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>

A:

метод getElementsByClassName() возвращает массив подходящих элементов со страницы, поэтому вам нужно обращаться к элементу по его индексу

function orange() { // Поставить индексы элемента
  document.getElementsByClassName("rectan")[0].style.backgroundColor = "#FFAD00FF";
}

function blue() {
  document.getElementsByClassName("rectan")[0].style.backgroundColor = "#5800B8FF";
}

function green() {
  document.getElementsByClassName("rectan")[0].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>

