Html - how to append one attribute with value

AashishASGGupta
December 27, 2024
76 views
3 votes
3 Answers

i want to append data-license-id="2" data-customer-id="11" attribute and values to <button type="button" class="btn btn-primary" id="closeModal" onclick="editLicense()" data-license-id="" data-customer-id="">Edit License</button> this tag

<button type="button" class="btn btn-primary" id="closeModal" onclick="editLicense()" data-license-id="2" data-customer-id="11">Edit License</button>

Tags: html javascript

Answers

function editLicense() {
  const sourceElement = document.querySelector('.edit-license');
  const targetElement = document.querySelector('#closeModal');
  targetElement.dataset.licenseId = sourceElement.dataset.licenseId;
  targetElement.dataset.customerId = sourceElement.dataset.customerId;
}

<a href="#" data-bs-toggle="modal" data-bs-target="#editLicenseModal" class="edit-license" data-license-id="2" data-customer-id="11">Edit</a>

<button type="button" class="btn btn-primary" id="closeModal" onclick="editLicense()" data-license-id="" data-customer-id="">Edit License</button>

This code gets all tags with class="edit-license" containing data-bs-toggle="modal" and data-bs-target="#editLicenseModal" then imports params to button with id="closeModal".

Note: JavaScript must be placed after HTML code.

let btn=document.getElementById("closeModal");
document.querySelectorAll(".edit-license").forEach(function(item){
if(item.getAttribute('data-bs-toggle')=="modal" && item.getAttribute('data-bs-target')=="#editLicenseModal"){
btn.addEventListener('click', (btn) => {
  buttonClick(btn);
});
btn.setAttribute('data-license-id', item.getAttribute('data-license-id'));
btn.setAttribute('data-customer-id', item.getAttribute('data-customer-id'));
}
})


function buttonClick(){
alert(btn.getAttribute('data-license-id'));
alert(btn.getAttribute('data-customer-id'));
}

function editLicense(){
alert("inline onclick");
}

<a href="#" data-bs-toggle="modal" data-bs-target="#editLicenseModal" class="edit-license" data-license-id="2" data-customer-id="11">Edit</a>
<button type="button" class="btn btn-primary" id="closeModal" onclick="editLicense()">Edit License</button>

Remove the inline JS on* handler. JS should be in one place only
Use Element.dataset["someProperty"] = "value" to assign data (or alternatively, using Object.assign())

// DOM utils
const el = (sel, par = document) => par.querySelector(sel);

// License 
addEventListener("click", (evt) => {
  const elEditLicense = evt.target.closest(".edit-license");
  if (!elEditLicense) return;
  const elCloseModal = el("#closeModal");
  const { licenseId, customerId } = elEditLicense.dataset;
  Object.assign(elCloseModal.dataset, {licenseId, customerId});
});

addEventListener("click", (evt) => {
  const elCloseModal = evt.target.closest("#closeModal");
  if (!elCloseModal) return;
  // TEST
  console.log(elCloseModal.dataset);
});

<a href="#"
  data-bs-toggle="modal"
  data-bs-target="#editLicenseModal"
  class="edit-license"
  data-license-id="2"
  data-customer-id="11">Edit</a>
  
<button type="button"
  class="btn btn-primary"
  id="closeModal"
  data-license-id=""
  data-customer-id="">Edit License</button>

Or alternatively, you could use Bootstrap Modal events and callback arguments to get the element caller data like in this example that uses jQuery

Please signup or login to give your own answer.

Click here to cancel reply.

Html – how to append one attribute with value

Answers