generate n buttons in bootstrap in typescript

To generate n buttons in Bootstrap using TypeScript, you can follow these steps:

  1. Create a container in your HTML to hold the buttons. For example:
index.ts
<div id="button-container"></div>
34 chars
2 lines
  1. In TypeScript, create a variable to hold the container element using the querySelector method:
index.ts
const buttonContainer = document.querySelector('#button-container');
69 chars
2 lines
  1. In TypeScript, create a function to generate the buttons. The function should take a parameter n which represents the number of buttons to generate. For example:
index.ts
function generateButtons(n: number): void {
  for (let i = 0; i < n; i++) {
    const button: HTMLButtonElement = document.createElement('button');
    button.classList.add('btn', 'btn-primary');
    button.innerText = `Button ${i+1}`;
    buttonContainer.appendChild(button);
  }
}
283 chars
9 lines
  1. Call the generateButtons function with the desired number of buttons to generate. For example:
index.ts
generateButtons(5);
20 chars
2 lines

This will generate 5 buttons in the #button-container element with the text "Button 1", "Button 2", etc. and the primary Bootstrap style.

gistlibby LogSnag