Create dynamic buttons with jQuery

Question

I'm attempting to dynamically create buttons with text loaded from a file into an array. The text loads, the array's created, but no buttons. I realize this has been asked before, but I must be doing something wrong.

var database = [];
var total;

document.getElementById('file').onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(progressEvent) {
    var lines = this.result.split('\n');
    for (var line = 0; line < lines.length; line++) {
      database[line] = lines[line].trim();

    }
    total = line;
  };
  reader.readAsText(file);
};

/*
function mkbuttons() {
  for (let i = 0; i < total; i++)
    $(document).ready(function() {
      for (i = 0; i < total; i++) {
        console.log(database[i]);
        $('<button/>', {
          text: database[i],
          id: 'btn_' + i,
          click: function() {
            alert('hi');
          }
        });
      }
    });
}

*/

function mkbuttons() {
 $(document).ready(function() {
      for (i = 0; i < total; i++) {
        console.log(database[i]);
        $('<button/>', {
          text: database[i],
          id: 'btn_' + i,
          click: function() {
            alert('hi');
          }
        });
      }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Create Buttons</title>
</head>

<body>
  <input type="file" name="file" id="file" accept=".txt">
  <br><br>
  <button i onclick="mkbuttons()">Make Buttons</button>
</body>

</html>

You're creating the buttons but never appending them anywhere. — Barmar
– Barmar, Commented Mar 5, 2021 at 19:31
Why do you have two loops in mkbuttons()? You're going to create total * total buttons. — Barmar
– Barmar, Commented Mar 5, 2021 at 19:32
The two loops was copy/paste carelessness. Thanks for pointing it out — Alan
– Alan, Commented Mar 5, 2021 at 20:09

Yoshida Atsushi · Accepted Answer · 2021-03-05 19:42:47Z

2

How do you think of this solution?

var database = [];
var total;

document.getElementById('file').onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(progressEvent) {
    var lines = this.result.split('\n');
    for (var line = 0; line < lines.length; line++) {
      database[line] = lines[line].trim();

    }
    total = line;
  };
  reader.readAsText(file);
};

function mkbuttons() {
  for (let i = 0; i < total; i++)
    $(document).ready(function() {
      for (i = 0; i < total; i++) {
        console.log(database[i]);
        var newBtn = $('<button/>', {
          text: database[i],
          id: 'btn_' + i,
          click: function() {
            alert('hi');
          }
        });
        
        $('#buttons').append(newBtn);
      }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Create Buttons</title>
</head>

<body>
  <input type="file" name="file" id="file" accept=".txt">
  <br><br>
  <button i onclick="mkbuttons()">Make Buttons</button>
  <div id="buttons">
  </div>
</body>

</html>

edited Mar 5, 2021 at 19:42

answered Mar 5, 2021 at 19:35

Yoshida Atsushi

898 bronze badges

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

1 Comment

Alan Over a year ago

This worked great. I cleaned up the code, removing the extraneous loop, adding the append.

Our_Benefactors · Accepted Answer · 2021-03-05 19:32:59Z

1

There are two glaring issues with your for loop:

Only use $(document).ready outside the function and only once. It should not be inside a for loop
You have an inner loop which is also using the same index variable name of i

Once you fix this syntax things should work better, or at least be easier to debug..

answered Mar 5, 2021 at 19:32

Our_Benefactors

3,6273 gold badges25 silver badges30 bronze badges

1 Comment

Barmar Over a year ago

It's not appending the buttons into the DOM.

Collectives™ on Stack Overflow

Create dynamic buttons with jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related