Creating n number of buttons (or variable number of buttons) in JavaScript

Question

I am new to JavaScript and am having difficulty with this task. I am writing code to paginate a table I have. Right now all the logic related to buttons is hard coded and I want to make it more dynamic. Meaning, I have five buttons that all have separate code to do the same thing and I want to refactor my code so that I have n buttons and one script that controls them.

I want the code to generate (total records/number of records per page) number of buttons, then I want to take the value of that button and pass it into already existing code to grab the right section of the data table.

How do I do this though? All of the documentation I've found is for jQuery libraries like DataTables (which I spent like an hour working with and it did not display anything).

I would appreciate any tips, tricks, or tutorials.

EDIT

    $(document).ready(function () {
        $('#b1').click(function () {
            var data = $("#isgeo").serializeArray();
            data.push({ name: "page", value: '1' })
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetTable", "SubsidencePoints")',
                data: $.param(data),
                cache: false,
                processData: false,
                contentType: false
            }).done(function (result) {
                $('#Sub-table').html(result);
                });
         $('#b2').click(function () {
            var data = $("#isgeo").serializeArray();
            data.push({ name: "page", value: '2' })
                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("GetTable", "SubsidencePoints")',
                    data: $.param(data),
                    cache: false,
                    processData: false,
                    contentType: false
                }).done(function (result) {
                    $('#Sub-table').html(result);
                    });

Please attempt to write code that does what you have described, then come back and ask about what specific problem you run into. — dlsso
– dlsso, Commented Aug 23, 2016 at 22:08
Sure, I posted up my hard code. I have no idea how to generate a variable number of buttons as I've been doing JavaScript for 2 days. I don't need you to write my code, I have read a good deal of the w3schools tutorials and have not found anything specific to this situation which will help make my code more dynamic. If you know a resource I would appreciate it. I may just need to use more precise search terms to find a tutorial, or I may be using the wrong ones. — Adam Reb Alloy
– Adam Reb Alloy, Commented Aug 23, 2016 at 22:13
It seems like I have enough information below to complete the task. — Adam Reb Alloy
– Adam Reb Alloy, Commented Aug 23, 2016 at 22:24

nixkuroi · Accepted Answer · 2016-08-23 22:17:13Z

1

Pretty easy. All you have to do is create a loop to loop through the total number of buttons and then use createElement to create a button and then attach an event to it programmatically. Check out the following code.

<div id="nav-buttons">

</div>

<script>
  
  var totalRecords = 500;
var recordsPerPage = 50;

var totalButtons = totalRecords/recordsPerPage;
var navButtons = document.getElementById("nav-buttons");
  console.log(totalButtons)
for (var b=0; b<totalButtons;b++)
{
  var button = document.createElement("button");
  button.setAttribute("pageto", b);
  button.innerHTML="Page " + b;
  navButtons.appendChild(button);
  
  button.addEventListener("click", function(event) {
    var btn = event.target;
    var page = btn.getAttribute("pageto");
    navButtons.appendChild(btn);
    alert(page);
    // goto(page) -- write your function for getting the records for page[page]
    });
  
 }
  </script>

answered Aug 23, 2016 at 22:17

nixkuroi

2,3291 gold badge20 silver badges25 bronze badges

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

2 Comments

Adam Reb Alloy Over a year ago

thank you. this is looks like everything I need to know to do this. I haven't seen this createElement function but had been using getElementById and some other parts of this code.

nixkuroi Over a year ago

If you're using JQuery, you can also do something like this: var button= $("<button/>"); That will also create your element, but then you can use .attr(). Also, instead of adding an event for each item, you can use $(document).on("click","button", function() {...}); to attach the event to all buttons that appear on the page.

ZenPylon · Accepted Answer · 2016-08-23 22:19:25Z

0

Perhaps try a for-loop -

$(document).ready(function () {
    for (var i = 0; i < numButtons; i++) {
        $('#b' + i).click(function () {
            var data = $("#isgeo").serializeArray();
            data.push({ name: "page", value: '1' });
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetTable", "SubsidencePoints")',
                data: $.param(data),
                cache: false,
                processData: false,
                contentType: false
            }).done(function (result) {
                $('#Sub-table').html(result);
            });
        });
    }
});

Is that what you're after?

answered Aug 23, 2016 at 22:19

ZenPylon

5384 silver badges11 bronze badges

2 Comments

Adam Reb Alloy Over a year ago

I am not sure this would work because I need to create the buttons, they don't already exist. The post above seems like it is the right direction.

ZenPylon Over a year ago

I see. You'll probably need a combination of both - one to create the buttons, and then one to attach the click() listeners

Collectives™ on Stack Overflow

Creating n number of buttons (or variable number of buttons) in JavaScript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related