2

Хочу чтобы по клику показало 4 блока.

window.onload = function() {
  document.getElementsByClassName('container').onclick = function() {
    document.getElementsByClassName('boxes').style.display = 'block';
  };
}
body {
  background: #50c878;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  height: 150px;
  width: 150px;
  margin: 230px;
  background: pink;
  border: 2px solid grey;
  border-radius: 50%;
  transition: all 0.5s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 2px 2px 15px 1px rgba(0, 0, 0, 0.2);
}


.container:hover {
  width: 200px;
  height: 200px;
  color: black;
  box-shadow: inset 2px 2px 100px 1px rgba(0, 0, 0, 0.4);
}


.container:hover::after {
  content: attr(data-title);
  position: absolute;
  font-size: 35px;
}


.boxes {
  width: 150px;
  height: 150px;
  background: #c39797;
  border-radius: 50%;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 5px 5px 10px 1px rgba(255, 0, 255, 0.3);
  display: none;
}


.box1 {
  position: absolute;
  top: 20px;
  left: 20px;
}


.box2 {
  position: absolute;
  top: 20px;
  right: 20px;
}


.box3 {
  position: absolute;
  bottom: 20px;
  left: 20px;
}


.box4 {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
<div class='container' data-title="Hello!"></div>
<div class='boxes box1'>Glad to see you there!</div>
<div class='boxes box2'>What is your name?</div>
<div class='boxes box3'>What do you like?</div>
<div class='boxes box4'>Tell me :)</div>
diralik
  • 9,395
Babin
  • 79
  • 2
    Переместите код из codepen в сам вопрос – andreymal Jun 15 '17 at 16:29
  • Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. – Алексей Шиманский Jun 15 '17 at 16:29
  • @Grundy размахался тут – Алексей Шиманский Jun 15 '17 at 16:43
  • @Grundy, аналогичный ответ не делает вопрос дубликатом! Сути вопросов между собой не связаны. Автор данного вопроса не имел проблем с addEventListner. – Vasiliy Rusin Jun 16 '17 at 22:19

1 Answers1

3

getElementsByClassName - Возвращает HTMLCollection дочерних элементов, а значит нужен цикл для обхода коллекции и установления им стиля.

Кроме того контейнеру проще присвоить id и делать клик на него, если он один на странице, либо извращаться через getElementsByClassName('container')[0]

window.onload = function() {
  document.getElementsByClassName('container')[0].onclick = function() {
    var boxes = document.getElementsByClassName('boxes');    
    for(var i = 0; i < boxes.length; i++) {       
      boxes[i].style.display = 'block';       
    }
  };
}
body {
  background: #50c878;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  height: 150px;
  width: 150px;
  margin: 230px;
  background: pink;
  border: 2px solid grey;
  border-radius: 50%;
  transition: all 0.5s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 2px 2px 15px 1px rgba(0, 0, 0, 0.2);
}


.container:hover {
  width: 200px;
  height: 200px;
  color: black;
  box-shadow: inset 2px 2px 100px 1px rgba(0, 0, 0, 0.4);
}


.container:hover::after {
  content: attr(data-title);
  position: absolute;
  font-size: 35px;
}


.boxes {
  width: 150px;
  height: 150px;
  background: #c39797;
  border-radius: 50%;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 5px 5px 10px 1px rgba(255, 0, 255, 0.3);
  display: none;
}


.box1 {
  position: absolute;
  top: 20px;
  left: 20px;
}


.box2 {
  position: absolute;
  top: 20px;
  right: 20px;
}


.box3 {
  position: absolute;
  bottom: 20px;
  left: 20px;
}


.box4 {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
<div class='container' data-title="Hello!"></div>
<div class='boxes box1'>Glad to see you there!</div>
<div class='boxes box2'>What is your name?</div>
<div class='boxes box3'>What do you like?</div>
<div class='boxes box4'>Tell me :)</div>
Алексей Шиманский
  • 73,186