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
  • Спасибо огромное за ответ!! я счастлива, что все работает!) 2 ноя 2019 в 22:24
  • @ЕкатеринаШатохина На здоровье. Успехов!
    – user176262
    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
    3 ноя 2019 в 11:36

Ваш ответ

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

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