Tengo una lista y quiero obtener el valor de la imagen y el texto usando JavaScript, ¿cómo puedo hacer eso? en este momento solo obtengo una identificación de li seleccionada.
Mi código:-
function reply_click() { console.log(event.target.id); } ul.coinList{ margin:0px; padding:0px;} ul.coinList li{ list-style:none; border:1px solid #ccc; padding:10px; display:flex; margin-bottom:20px; display:block;} <ul class="coinList"> <li id="1" onClick="reply_click();"> <img src="https://via.placeholder.com/140x100" /> <span class="coinText">one</span> </li> <li id="2" onClick="reply_click();"> <img src="https://via.placeholder.com/140x100" /> <span class="coinText">two</span> </li> </ul>¡Gracias por tus esfuerzos!
En primer lugar, el detector de eventos solo puede estar en <ul> . Y luego puede encontrar el <li> usando Element.closest() del elemento en el que se hizo clic ( e.target ). Desde allí, puede encontrar los dos elementos secundarios con Document.querySelector() .
function reply_click(e) { let li_elm = e.target.closest('li'); let img_elm = li_elm.querySelector('img'); let span_elm = li_elm.querySelector('span'); console.log('id:', li_elm.id, 'img:', img_elm.src, 'text:', span_elm.textContent); } document.querySelector('ul.coinList').addEventListener('click', reply_click); ul.coinList { margin: 0px; padding: 0px; } ul.coinList li { list-style: none; border: 1px solid #ccc; padding: 10px; display: flex; margin-bottom: 20px; display: block; } <ul class="coinList"> <li id="1"> <img src="https://via.placeholder.com/140x100" /> <span class="coinText">one</span> </li> <li id="2"> <img src="https://via.placeholder.com/140x100" /> <span class="coinText">two</span> </li> </ul> function reply_click() { if(event.currentTarget.tagName==="LI") { alert(event.currentTarget.id); alert(event.currentTarget.querySelector('img').src); } } ul.coinList{ margin:0px; padding:0px;} ul.coinList li{ list-style:none; border:1px solid #ccc; padding:10px; display:flex; margin-bottom:20px; display:block;} <ul class="coinList"> <li id="1" onClick="reply_click();"> <img src="https://via.placeholder.com/140x100" /> <span class="coinText">one</span> </li> <li id="2" onClick="reply_click();"> <img src="https://via.placeholder.com/140x100" /> <span class="coinText">two</span> </li> </ul>