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?
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>
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.