Create multiple buttons in JavaScript

Question

I have checked for syntax errors and it does seems like everything is okay, it just does not do anything when loading the body of the page. I know I have linked the script correctly to the html file, because I've already implemented a JS Clock which displays itself in the page as you can see in the pen. Is there anything wrong with my code? Why aren't my 10 buttons displaying? I fear Bootstrap may be preventing me from getting my buttons show up.

My purpose is to create 10 buttons, so that I don't have to write the same code 10 times.

The Codepen is just to check out my code, I work on Atom usually. This is my Codepen!

<div class="container-fluid" id="buttons">

</div>

function createButtons() { 
  for(i = 0; i < 11; i++) {
    var button = document.createElement("<button type=\"button\" class=\"btn btn-outline-success\">Chapter[i]</button>");
    var buttonDiv = document.getElementById("buttons");
    buttonDiv.appendChild(button);
  }
}
document.body.addEventListener("load", createButtons(), false);

That's not how you use createElement, view documentation on how to use it correctly. You should have seen errors on the console due to it — Patrick Evans
– Patrick Evans, Commented Apr 25, 2018 at 15:23
var buttonDiv = document.getElementById("buttons"); for(var i = 1; i <= 10; i++) { buttonDiv.innerHTML += '<button type="button" class="btn btn-outline-success">Chapter['+i+']</button>'; } — mplungjan
– mplungjan, Commented Apr 25, 2018 at 15:25

Douglas · Accepted Answer · 2018-04-25 15:33:00Z

5

The function createElement accept a tag name as argument.

var Chapter = [0,1,2,3,4,5,6,7,8,9,10];
for(i = 0; i < 11; i++) {
    var button = document.createElement("button");
    button.innerHTML = Chapter[i];
    button.className = "btn btn-outline-success";
    var buttonDiv = document.getElementById("buttons");
    buttonDiv.appendChild(button);
  }

answered Apr 25, 2018 at 15:33

Douglas

3814 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cynthia Nwakaeme · Accepted Answer · 2023-09-11 14:10:28Z

0

Improve your code and add dynamic functions

let buttonDiv = document.getElementById("buttons");

const createButtons = () => {
  for (let i = 1; i <= 20; i++) {
    let button = document.createElement("button");
    button.id = `${i}`;
    button.textContent = `Button #${i}`
    button.click(buttonEvent(i));
    buttonDiv.appendChild(button);
  }
}

const buttonEvent = i => {
  document.body.addEventListener( 'click',  (event)  => {
    if(event.target.id === i.toString()) alert(event.target.id);
    event.preventDefault();

  });
}



document.body.addEventListener("load", createButtons(), false);

answered Sep 11, 2023 at 14:10

Cynthia Nwakaeme

1273 silver badges7 bronze badges

Collectives™ on Stack Overflow

Create multiple buttons in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related