JS Вызов функции для разных элементов определенных одного класса html css

Question

Только начала изучать html css js, поэтому вопрос очень криво задан

у меня есть css .class, который реализует некую панельку, я хочу чтобы на страницы эти панельки было 2, и для каждой мне нужно вызвать функцию Я не понимаю, как вызвать функцию для конкретной моей панельки

function move() {
  var elem = document.getElementsById("blueBar");
}

.blueBar {
  height: 100px;
  width: 0;
  background-color: #4a4acb;
  border-radius: 8px;
}

<div class="blueBar"></div>
<div class="blueBar"></div>
<button onclick="move()">Начать</button>

Answer 1

Надеюсь, что я вас понял правильно.

const getPanel = (pos = 0) => {
  const button = document.querySelector('.button');
  button.addEventListener('click', () => {
    const blueNodeList = document.querySelectorAll('.blue');
    blueNodeList[pos].classList.remove('hiden');
  });
};

const variant = prompt('Введите какая панелька вам нужна (0,1)');

getPanel(variant);

body {
  background: #fff;
}

.blue {
  height: 100px;
  width: 100px;
  margin-bottom: 50px;
  background-color: #4a4acb;
  border-radius: 8px;
  transition: 1.2s;
}

.hiden {
  opacity: 0;
  visibility: hidden;
}

 <body>
    <button class="button">Показать панель</button>
    <div class="blue hiden">Ваша первая панель</div>
    <div class="blue hiden">Ваша вторая панель</div>
    <script src="script.js"></script>
  </body>

БЛОГ НА HUSL

JS Вызов функции для разных элементов определенных одного класса html css

Ответы (1 шт):