Getting the value of attribute data-* in an inline function

Question

I have a data attribute data-niq which i am using to store some data. I want to pass the data in *-niq to a function as a second parameter to a function.

This is the code

<button onClick="editevent(this.id,this.id.getAttribute('data-niq'));" id="mid" data-niq="niq" class="mr edit btn btn-success pull-right"> Edit</button>

<script>
function editevent(clicked_id,attri_bute){
console.log('clicked id',clicked_id);
console.log('data-niq',attri_bute);
}
</script>

and the link https://jsfiddle.net/codebreaker87/zob8dm4z/8/

When i run the code i get TypeError: this.id.getAttribute is not a function

How can i pass the data-niq value in the inline function that i am calling?.

get rid of the .id in this.id.getAttribute('data-niq'). however i'd also suggest you to stop using inline javascript. — DarkAtra
– DarkAtra, Commented Nov 10, 2016 at 23:01

Geeky · Accepted Answer · 2016-11-10 23:09:12Z

3

Few things here

Never mix your mark up with javascript
Try to bind events in javascript end.

check the following snippet.

window.onload = function() {

  var mid = document.getElementById("mid");
  mid.addEventListener('click', function() {
    editevent(this);
  })
}

function editevent(thisObj) {

  var id = thisObj.getAttribute('id');
  var dataniq = thisObj.getAttribute('data-niq');
  alert(id);
  alert(dataniq);
}

<button id="mid" data-niq="niq" class="mr edit btn btn-success pull-right">Edit</button>

Hope it helps

answered Nov 10, 2016 at 23:09

Geeky

7,5142 gold badges28 silver badges52 bronze badges

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

1 Comment

DarkAtra Over a year ago

Perfect answer. Here is a reference on why inline javascript is bad most of the time: softwareengineering.stackexchange.com/questions/86589/…

Sagar · Accepted Answer · 2016-11-10 23:02:48Z

1

you have added this.id.getAttribute('data-niq');

remove id

this.getAttribute('data-niq')

answered Nov 10, 2016 at 23:02

Sagar

5383 silver badges9 bronze badges

Collectives™ on Stack Overflow

Getting the value of attribute data-* in an inline function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related