How to add a listener for each button?

Good afternoon. I have a list of buttons, which in their names contain the name of the material in quotes is written id. I need to add a listener(I think it's done) so that when you click on a button in the console output its id.

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


Clicking on the first button in the console should get the number 143, when clicking on the second - 153...
Note: needs to be pure js.
Thanks in advance.
March 20th 20 at 11:29
1 answer
March 20th 20 at 11:31
Solution
document.querySelector('ul').addEventListener('click', function(e) {
 if (e.target.tagName === 'BUTTON') {
console.log(e.target.textContent.match(/\["(\d+)"\]/).pop());
}
});
@Lorna81, ok, thanks a lot. - Buste commented on March 20th 20 at 11:40
@Judy_McCullough76, e.target.id. - Mohammed_Weimann commented on March 20th 20 at 11:37
Thank you very much this is what needed!...

I would be very grateful if you suggested... These IDs I have stored in the array and are generated on the page, but it turned out that I need to take them from page, and from the array. Could you suggest how I can extract them from the array in the same way and the same when clicking on a specific button to its id? I have assigned each button an id, but how to extract them do not know.
In advance very grateful.

the <ul>
 the <li><button id="143">First - Wall ["143"]</button></li>
 the <li><button id="153">Next - Floor ["153"]</button></li>
 the <li><button id="654">First - Wall ["654"]</button></li>
 the <li><button id="764">Second - Item ["764"]</button></li>
the <ul>
- Buste commented on March 20th 20 at 11:34

Find more questions by tags JavaScriptHTML