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?

Logistician

backOfferButton.setAttribute('data-target', '#addDifferentOffer')? – Implantation

Answer 1

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>

Toughen

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

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

@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 – Logistician

Welcome to stackOverflow world, glad I could helps. – Toughen

Answer 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

Breastplate