0

Только начала изучать 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>

3
  • а при каком событии должна срабатывать функция? button в коде как-то на это влияет? 8 ноя 2021 в 14:04
  • @Alena Мы тоже не знаем, что вам нужно. Мой совет сначала сами поймите как описать задачу, которую вам нужно выполнить. На сайте 2 панельки, как я могу вызывать конкретно мою панельку, я с этой мыслью теперь спать буду, что вы тут имели виду, дай бог senior поймет.
    – WalkMess
    8 ноя 2021 в 14:19
  • или пропишите разные классы, если хотите к разным панелям обращаться, или напишите что вы хотите реализовать.
    – Alexandr
    8 ноя 2021 в 15:20

1 ответ 1

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>

2
  • [Не по теме в качестве шутки] люди которые используют prompt и alert, будут гореть в отдельном котле
    – Greg--
    8 ноя 2021 в 17:10
  • Тут он один раз используется и для эксперимента, я prompt вообще не использую, просто тут отдельный случай.
    – WalkMess
    8 ноя 2021 в 18:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.