0

Здравствуйте!

По клику на кнопку нужно выводить с помощью alert текст который в h2 теге. Выводить текст с тега h2 блока в котором был клик e не выходит. Я пробовал обращаться к parent элементу, а от него к child. Но вывести получается только значение h2 первого блока:

var table = document.getElementById('table');
var title = document.getElementsByTagName('h2')[0];

table.onclick = function(event) {

  var target = event.target;
  while (target != this) {
    if (target.tagName == 'BUTTON') {
      alert(title.innerHTML);
      //alert ????  Тут с кодом проблемы
      return;
    }
    target = target.parentNode;
  }
}
<ul id="table">
  <li>
    <h2>test-title-first</h2>
    <p>loremloremlorem</p>
    <button>buy</button>
  </li>
  <li>
    <h2>test-title-second</h2>
    <p>loremloremlorem</p>
    <button>buy</button>
  </li>
  <li>
    <h2>test-title-third</h2>
    <p>loremloremlorem</p>
    <button>buy</button>
  </li>
</ul>

Пример на стороннем редакторе: jsfiddle-ayda3f2f

2
  • Спасибо за помощь. Ответ DimenSi это то что я хотел реализовать. Спасибо за ссылку на гуд туториал.
    – pridan
    29 янв 2017 в 17:41
  • 1
    Вопросу более 5ти лет. Хочу сказать спасибо и тому кто задал, и тем кто ответил! Я только учусь, ковырял корзину 3 дня. и этим способом нашел как за 4 строки повесить "Добавить в корзину" на все товары!!! 23 сен 2022 в 14:54

2 ответа 2

3

Накидываем onclick на table, чекам событие на нужный элемент, от него ищем родителя через closest(), потом у родителя через querySelector().

const table = document.querySelector('#table');

table.onclick = function(e) {
  let target = e.target;
  
  if (target.tagName = 'BUTTON') { 
   let title = target.closest('li').querySelector('h2').textContent;
    console.log(title);
}
}
<ul id="table">
            <li>
                <h2>test-title-first</h2>
                <p>loremloremlorem</p>
                <button>buy</button>
            </li>
            <li>
                <h2>test-title-second</h2>
        <p>loremloremlorem</p>
                <button>buy</button>
            </li>
            <li>
                <h2>test-title-third</h2>
        <p>loremloremlorem</p>
                <button>buy</button>
            </li>
        </ul>

1
  • А если список три мили в длину? Вопрос о делегировании, вообще-то.
    – user207618
    29 янв 2017 в 16:53
0

Почитайте весьма хорошую статью с основами: тык.

// Ищем таблицу и вешаем слушатель клика
document.querySelector('#table').addEventListener('click', e => {
  let target = e.target;
  
  // Если нода - это кнопка (проверки должны быть сложнее, читайте по ссылке выше)
  if(target.nodeName === 'BUTTON'){
    // То запускаем обработку
    handler(target);
  }
});

function handler(button){
  // Ищем предка кнопки (li), у него берём первого потомка (h2) и оттуда текст
  // Этот код крепко привязан к разметке, лучше использовать методы closest и querySelector
  console.info(button.parentNode.children[0].innerHTML);
}
<ul id="table">
    <li>
        <h2>test-title-first</h2>
        <p>loremloremlorem</p>
        <button>buy</button>
    </li>
    <li>
        <h2>test-title-second</h2>
<p>loremloremlorem</p>
        <button>buy</button>
    </li>
    <li>
        <h2>test-title-third</h2>
<p>loremloremlorem</p>
        <button>buy</button>
    </li>
</ul>

0

Ваш ответ

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

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