如何将自定义集数据传递给 src 图像“onClick”？

Question

I have this function

 function changeImage() {
        console.log(event.target.getAttribute('data-image-path'));
        document.getElementById('image-id').src = event.target.getAttribute('data-image-path');
    }

on click I want to pass the data-image-path into the changeImage function, the data-image-path is inside the li so is the onclick:

<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(this.data-image-path)'> 
<div class="inside-li">
<img src="./assets/img/my_imgs/features/feat1.png" alt="image"> 
<p>Easy Scheduling &amp; Attendance Tracking</p>
</div>
<div class="plan-hr">
   <hr class="hr-1">
   <hr class="hr-2">
</div>
</li>

image:

I have multiple li elements and each contains a different src image inside its data-image-path but how can I pass the data?

This is the img element that should recieve the src :

<div class="image-loader col-md-6 col-sm-12">
    <div class="banner-thumb-wrap">
       <div class="banner-thumb">
          <img class="header-inner-img" id="image-id">
       </div>
    </div>
</div>

Here is the result in my console.log and code:

Answer 1

Use event.target.getAttribute('data-image-path') to get the clicked li 's data-image-path value inside changeImage() method.

 function changeImage() { console.log(event.target.getAttribute('data-image-path')); document.getElementById('image-id').src = event.target.getAttribute('data-image-path'); }

 <img class="header-inner-img" id="image-id"> <li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage()'> </li>

Answer 2

You can change your HTML into this:

<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(event.target.dataset.imagePath)'> </li>

But there is a better version:

Select the li elements with querySelectorAll and addEventListener for them afterward.

Answer 3

Try this, pass this to changeImage function and get the attribute of the clicked element.

function changeImage(obj) {
        var imagePath2 = obj.getAttribute('data-image-path');
        document.getElementById('image-id').src = imagePath2;
    }

<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(this)'> </li>

Answer 4

I slightly changed your html code, and significantly changed the js code using the forEach method, with a click listener inside. This means that calling the onclick=changeImage (this.data-image-path) event is no longer needed! I also left the console so that you can see which attribute is being loaded on click at the moment.

I hope that is exactly what you needed.

 var li_attr = document.querySelectorAll('li'); var img = document.getElementById('image-id'); Array.from(li_attr).forEach(function(li_attrArray, i) { li_attrArray.addEventListener('click', function() { imagePath2 = li_attrArray.getAttribute('data-image-path'); img.src = imagePath2; console.log(img.src); }); });

 <li data-image-path="./assets/img/my_imgs/features/sc1.png">1</li> <li data-image-path="./assets/img/my_imgs/features/sc2.png">2</li> <li data-image-path="./assets/img/my_imgs/features/sc3.png">3</li> <li data-image-path="./assets/img/my_imgs/features/sc4.png">4</li> <img class="header-inner-img" id="image-id">

Answer 5

You can pass the event and then access the data through the event.target.getAttribute()

 function changeImage(e) { const dataImagePath = e.target.getAttribute('data-image-path'); document.getElementById('image-id').src = dataImagePath; console.log(dataImagePath); console.log(document.getElementById('image-id').src); }

 <li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(event)'> </li> <img class="header-inner-img" id="image-id">