Как по клику на кнопку получить определённую часть её текста?

Question

[Alisa94]

Есть кнопки, текст которых среди прочего содержит в кавычках id. Как при клике на кнопки выводить в консоль эти id?

<ul>
  <li><button>First - Wall ["143"]</button></li>
  <li><button>Next - Floor ["153"]</button></li>
  <li><button>First - Wall ["654"]</button></li>
  <li><button>Second - Item ["764"]</button></li>
<ul>

При нажатии на первую кнопку в консоли должен получит число 143, при нажатии на вторую - 153...

Answer 1

[0xD34F]

Как достать кусок текста из элемента:

const getValue = el => el.textContent.match(/"(.*?)"/)[1];

// или

const getValue = ({ innerText: t }) =>
  JSON.parse(t.slice(t.indexOf('['), -~t.indexOf(']'))).shift();

Как обработать клики - можно обработчик назначить каждой кнопке индивидуально:

document.querySelectorAll('li button').forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(getValue(e.target)));

Или делегировать обработку события общему предку:

document.querySelector('ul').addEventListener('click', e => {
  if (e.target.tagName === 'BUTTON') {
    console.log(getValue(e.target));
  }
});

Comments

[Alisa94]

Спасибо большое это то что было нужно!...

Я был бы очень благодарен, если вы подсказали... Эти id у меня хранятся в массиве и генерируются на странице, но вышло так, что мне нужно взять их не из страницы, а из массива. Не могли ли вы подсказать, как я могу извлечь их из массива подобным же образом и так же при клике на конкретную кнопку получить её id? Я уже присвоил каждой кнопки свой id, но как извлечь их не знаю.
Заранее очень благодарен.

<ul>
  <li><button id="143">First - Wall ["143"]</button></li>
  <li><button id="153">Next - Floor ["153"]</button></li>
  <li><button id="654">First - Wall ["654"]</button></li>
  <li><button id="764">Second - Item ["764"]</button></li>
<ul>

[0xD34F]

Alisa94, e.target.id.

[Alisa94]

0xD34F, ok, огромнейшее спасибо.