CODEWITHSUNDEEP
javascriptjqueryhtml
Sikander
Sikander

Reputation: 2835

Javascript: getting data-attr on click event

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

Upvotes: 0

Views: 87

Answers (4)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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

Upvotes: 2

Rajesh
Rajesh

Reputation: 24915

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>

Upvotes: 0

CoderPi
CoderPi

Reputation: 13211

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>

Upvotes: 0

Adam Azad
Adam Azad

Reputation: 11297

Use getAttribute()

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

Upvotes: 1

Related Questions