data-target button attribute change via vanilla javascript

Question

Ive got button that is closing bootstrap modal as below:

<button id="back_offer_button" type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#addOffer">Go back</button>

I want to be able to dynamic change data-target via vanilla javascript to different location:

For example now is

data-target="#addOffer"

I want to change it to

data-target="#addDifferentOffer"

So I tried to get this button:

var backOfferButton = document.getElementById('back_offer_button');

And then:

backOfferButton.data-target = "#addDifferentOffer" <?>

This of course doesn't work. How should it be written correctly?

backOfferButton.setAttribute('data-target', '#addDifferentOffer')? — CRice
– CRice, Commented Oct 25, 2017 at 16:18

Zakaria Acharki · Accepted Answer · 2017-10-25 16:24:38Z

14

The right way to manage data-* attributes is by using dataset :

var backOfferButton = document.getElementById('back_offer_button');
backOfferButton.dataset.target = "#addDifferentOffer";

Hope this helps.

var backOfferButton = document.getElementById('back_offer_button');

console.log(backOfferButton.dataset.target);

backOfferButton.dataset.target = "#addDifferentOffer";

console.log(backOfferButton.dataset.target);

<button id="back_offer_button" type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#addOffer">Go back</button>

answered Oct 25, 2017 at 16:24

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

4 Comments

gileneusz Over a year ago

This is also the right way, thank you again for your help

GramThanos Over a year ago

Heads up for compatibility with old browsers (if you target them), developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

gileneusz Over a year ago

@ZakariaAcharki Thank you for your suggestion, I've changed the accepted answer. I'm beginner so I cannot make this kind of decisions correctly yet

Zakaria Acharki Over a year ago

Welcome to stackOverflow world, glad I could helps.

Kumar Shubham · Accepted Answer · 2017-10-25 16:22:16Z

2

Yes, as stated in the comment also, the general way of setting/getting HTML attribute values is by using the setAttribute(),getAttribute() methods.

So , you would do something like:

let element = document.getElementById('#someId'); element.setAttribute('name-of-the-attribute', value); Have a look here

answered Oct 25, 2017 at 16:22

Kumar Shubham

5247 silver badges19 bronze badges

Collectives™ on Stack Overflow

data-target button attribute change via vanilla javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related