Javascript: getting data-attr on click event

Question

i am trying to alert data-attr value on click event like this

<div class="col-md-2 col-xs-2" onclick="changeImage(event)">
    <img src="img/img1.jpg" data-attr="img1.jpg">
    <img src="img/img2.jpg"  data-attr="img2.jpg">
</div> 

<script type="text/javascript">
        function changeImage(event){
                    var target= event.target;                    
                    alert(target.data-attr);
        }
</script>

here if i target src of image that will alert but data-attr wont how can i do this pleas help

Rory McCrossan · Accepted Answer · 2015-12-26 11:33:40Z

2

You should use the dataset property to retrieve data-* attributes:

function changeImage(event) {
    var target = event.target;
    alert(target.dataset.attr);
}

Working example

Also, seeing as you tagged this question with jQuery, here's a jQuery implementation without the ugly onclick attribute:

<div class="col-md-2 col-xs-2">
    <img src="img/img1.jpg" data-attr="img1.jpg">
    <img src="img/img2.jpg" data-attr="img2.jpg">
</div>

$(function() {
    $('div.col-md-2').on('click', 'img', function() {
        alert($(this).data('attr'))
    });
});

Example fiddle

answered Dec 26, 2015 at 11:33

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sikander Over a year ago

and to assign that attribute as src to an image i am using this is that okay document.getElementById("mainimg").src='images/'.target.getAttribute('data-attr')

Rory McCrossan Over a year ago

No, don't use getAttribute for reading data attributes as it makes another pointless request to the DOM. Use dataset.attr, as I mentioned in my answer. Also + is the concatenation character in JS. Use this: document.getElementById("mainimg").src = 'images/' + target.dataset.attr;, or jQuery: $('#mainimg').prop('src', $(this).data('attr'));

Adam Azad · Accepted Answer · 2015-12-26 11:32:13Z

1

Use getAttribute()

function changeImage(event){
      var target= event.target;                    
      console.log( target.getAttribute('data-attr') );
}

answered Dec 26, 2015 at 11:32

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

Comments

CoderPi · Accepted Answer · 2015-12-26 11:33:20Z

0

Use ELEMENT.getAttribute("ATTRIBUTE") to get any Attribute on a Element:

And in case of the data- Attribute you can also use ELEMENT.dataset.ATTRIBUTE:

<div class="col-md-2 col-xs-2" onclick="changeImage(event)">
  <img src="img/img1.jpg" data-attr="img1.jpg">
  <img src="img/img2.jpg" data-attr="img2.jpg">
</div>

<script type="text/javascript">
  function changeImage(event) {
    var target = event.target;
    alert(target.getAttribute("data-attr"));
    alert(target.dataset.attr);
  }
</script>

answered Dec 26, 2015 at 11:33

CoderPi

13.2k4 gold badges38 silver badges64 bronze badges

Comments

Rajesh Dixit · Accepted Answer · 2015-12-26 11:33:30Z

0

Try using getAttribute() function. Following code depicst the same

function changeImage(event) {
  var target = event.target;
  console.log(target.getAttribute("data-attr"));
}

<div class="col-md-2 col-xs-2" onclick="changeImage(event)">
  <img src="img/img1.jpg" data-attr="img1.jpg">
  <img src="img/img2.jpg" data-attr="img2.jpg">
</div>

answered Dec 26, 2015 at 11:33

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

Collectives™ on Stack Overflow

Javascript: getting data-attr on click event

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related