1

я в js полный профан, пока( да и вообщем в верстке( признаюсь сразу. Никак не могу задать нескольким кнопкам выполнение одной и той же функции, могла конечно расплодить код для каждого id, но хочется делать правильно сразу. нужно чтобы по нажатию кнопки "показать телефон" появлялся блок с телефоном и текстом "звонок по России...", снизу будет JS код который работает только для одной кнопки , а у меня таких 4 и может потом и больше добавиться( и я никак не могу сделать чтобы для всех работало(

<div class="companyCard_phone" id="phone__Number">
  <div class="companyCard_phone__Number" id="companyCard_phone__Number1">
    <p>+7 (486) 123 - 45 - 67</p>
    <span>Звонок по России бесплатный</span>
  </div>
  <button type="submit" class="companyCard_phone__btn button" 
    id="btn_phone__Number1">
            Показать телефон
  </button>
</div>

javascript

document.getElementById('btn_phone__Number1')
 .addEventListener('click', function(){
  this.style.display = 'none';
  document.getElementById('companyCard_phone__Number1').style.display = 
  'block';
 });

а это то что я пыталась, но не работает

document.getElementsByClassName(".companyCard_phone__btn").addEventListener('click', function(){
    this.style.display = 'none';
    document.getElementsByClassName(".companyCard_phone__Number").style.display = 'block';
  });

2 ответа 2

0

document.querySelectorAll('.companyCard_phone__btn').forEach(
  item => item.addEventListener('click', function() {
    this.style.display = 'none';
    this.closest('.companyCard_phone').
      querySelector('.companyCard_phone__Number').style.display = 'block';
  })
);
.companyCard_phone__Number {
  display: none;
}
<div class="companyCard_phone">
  <div class="companyCard_phone__Number">
    <p>+7 (486) 123 - 45 - 67</p>
    <span>Звонок по России бесплатный</span>
  </div>
  <button type="button" class="companyCard_phone__btn button">
    Показать телефон
  </button>
</div>
<div class="companyCard_phone">
  <div class="companyCard_phone__Number">
    <p>+7 (486) 987 - 65 - 43</p>
    <span>Звонок по России платный</span>
  </div>
  <button type="button" class="companyCard_phone__btn button">
    Показать телефон
  </button>
</div>

2
  • Спасибо огромное за ответ!! я счастлива, что все работает!) Commented 2 нояб. 2019 в 22:24
  • @ЕкатеринаШатохина На здоровье. Успехов!
    – user176262
    Commented 2 нояб. 2019 в 23:40
0

Вот все работает

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="script.js" defer></script>
</head>
<body>
    <div class="companyCard_phone" id="phone__Number">
  <div class="companyCard_phone__Number" id="companyCard_phone__Number1">
    <p>+7 (486) 123 - 45 - 67</p>
    <span>Звонок по России бесплатный</span>
  </div>
  <button type="submit" class="companyCard_phone__btn button" 
    id="btn_phone__Number1">
            Показать телефон
  </button>
</div>
</body>
</html>    

javascript

let div = document.getElementsByClassName("companyCard_phone__Number");
for(let i=0; i<div.length; i++)
    {
        div[i].style.display = 'none';
    }

let btn = document.getElementsByClassName("companyCard_phone__btn");
for(let i=0; i<btn.length; i++)
    {
        btn[i].addEventListener('click', function(){ this.previousElementSibling.style.display = 'block'});
    }
1
  • Обращайтесь, просто поставьте галочку возле ответа ;Д
    – Yanun
    Commented 3 нояб. 2019 в 11:36

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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