Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How do I add data-bs-target to button using Js?

Actually, My whole function is built in javascript and I searched on Google to add data-bs-toggle using js but all were showing jquery.
Here’s My code:

function onload_function(params) {
    n = 100
    for (let i = 0; i < n; i++){
        elem = document.getElementById(i)
        //console.log(elem.textContent)
        try{
            console.log(elem.textContent)
            new_elem = document.createElement('button');
            new_elem.innerHTML = elem.textContent;
            new_elem.{{data-bs-target}} = '#support-tab-8'; <-- here
            new_elem.id = 'button-' + i.toString();
            new_elem.classList.add("nav-link");
            document.getElementById("dynamic-headings").appendChild(new_elem);

        }
        catch{
            
        }
    }

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

You can access the Data Attributes by using the .dataset property and set the Value of the Data attribute you want to change.
Keep in mind, that while the data-attributes are written in kebab-case inline in html, in Javascript those are accessed with camelCase.
Therefore you want to set the Value like this new_elem.dataset.bsTarget = "YourValue"

I’ve appended a snippet demonstrating the procedure below.

// We want to add the EventListeners only if the DOM is fully loaded to ensure that no issues happen.
document.addEventListener('DOMContentLoaded', function(){

  // Just for the sake of demonstrating I've added a button with an onClick Event to trigger the 
  // change of the Data Attribute. In your code the change within might happen at any point.
  document.getElementById('btnChange').addEventListener('click', function(){
  
    // We need the NodeElement of the Element we want to change the Data Attribute for.
    const el = document.querySelector('.my-span');
    
    // If the Element exists we then change the Data attribute by just accessing the Dataset 
    // property and define a property in the Dataset Object which is called the same as the 
    // Attribute we want to set. But again, keep in mind that we write the Attribute here in 
    // camelCase
    if(el) el.dataset.bsTarget = "MyValue";
  })
});
.my-span[data-bs-target="MyValue"]{
  background-color: red;
}
<div class="container">
  <span class="my-span">My Span Element</span>
  <button id="btnChange">Change Data Attribute</button>
</div>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading