How to get image & text value on click in JavaScript?

Question

I have a list and I want to get image and text value using JavaScript how can i do that? right now i'm getting only selected li id.

My Code:-

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>

Thanks for your efforts!

Don't use inline event handlers or running numbers as ids: jsfiddle.net/vt37hz8y — user5734311
– user5734311, Commented Jun 2, 2022 at 7:18

chrwahl · Accepted Answer · 2022-06-02 09:39:18Z

First of all the event listener can just be on the <ul>. And then you can find the <li> by using Element.closest() from the element that was clicked (e.target). From there you can find the two child elements with 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>

ajay.16nk · Accepted Answer · 2022-06-02 10:19:09Z

1

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>

answered Jun 2, 2022 at 10:19

ajay.16nk

1003 bronze badges

Collectives™ on Stack Overflow

How to get image & text value on click in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related