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

admin管理员组

文章数量:1431435

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{
            
        }
    }

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{
            
        }
    }

• javascript

Share Improve this question Follow asked Aug 2, 2022 at 11:27 Proud WadhwaProud Wadhwa 6911 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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>

Use setAttribute method

setAttribute("data-bs-theme","dark")

Example from MDN linked above:

const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

本文标签： javascriptHow do I add databstarget to button using JsStack Overflow