Dynamic button javascript

Question

had a look for a guide on this but couldn't really find anything specific on it, and thought you guys could help.

I have a javascript file which performs various tasks onLoad. Currently I have 5 buttons in an HTML page but what I would like to do is to is read from an array in the js file and dynamically create a number of buttons depending what was in the array.

Similarly I want the buttons on click to be 'listened' for (alter an array in the js)

I have an idea that I want to read the array elements and set them as the button IDs and create them. Likewise I want to listen to what button has been clicked by its ID and have it alter an array. But how do I actually go about that process?

Cheers

Can you explain exactly what you want to do when the button is clicked? — DaveRandom
– DaveRandom, Commented Aug 15, 2011 at 13:56
If I have an array; arr = [0,1,2,4] I want to create buttons with those IDs, and once the buttons are created, I want to then change a different array depending if the button has been clicked; For example a button with ID = 2 and the arr2 = [0,1,3] when clicked would then change that array to arr2 = [0,1,2,3] — myol
– myol, Commented Aug 15, 2011 at 14:08
Excellent, I took a wild guess and did just that in my solution. It doesn't behave like a set though... If you click the button twice, it will be added to arr2 twice. Is that what you want? Or do you want it to be added just once? — Spycho
– Spycho, Commented Aug 15, 2011 at 14:11
My solution below is essentially a JQuery-free version of what @Spycho has done, so take you pick - I'd probably go with Spycho's cos JQuery will make your life much easier in the long run... — DaveRandom
– DaveRandom, Commented Aug 15, 2011 at 14:16
Ah ok. I would go for @DaveRandom's solution then, but with a slight modification to toggle rather than continuously append. — Spycho
– Spycho, Commented Aug 15, 2011 at 14:27

DaveRandom · Accepted Answer · 2011-08-15 14:13:19Z

2

Something like this...?

<html>
  <head>
    <script type="text/javascript">
      var arrayToModify = [];
      window.onload = function () {
        var i, buttonsToCreate, buttonContainer, newButton;
        buttonsToCreate = ['button1','button2','button3','button4','button5'];
        buttonContainer = document.getElementById('this_element_contains_my_buttons');
        for (i = 0; i < buttonsToCreate.length; i++) {
          newButton = document.createElement('input');
          newButton.type = 'button';
          newButton.value = buttonsToCreate[i];
          newButton.id = buttonsToCreate[i];
          newButton.onclick = function () {
            alert('You pressed '+this.id);
            arrayToModify[arrayToModify.length] = this.id;
          };
          buttonContainer.appendChild(newButton);
        }
      };
    </script>
  </head>
  <body>
    <div id='this_element_contains_my_buttons'></div>
    <input type='button' onclick='alert(arrayToModify);' value='Show the buttons I have clicked' />
  </body>
</html>

EDIT: I have just added some functionality to track button presses in an array, as requested in the comment above

edited Aug 15, 2011 at 14:13

answered Aug 15, 2011 at 14:07

DaveRandom

88.8k11 gold badges159 silver badges174 bronze badges

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

1 Comment

myol Over a year ago

I can use this with a bit of playing about as I now see what is going on. Thanks.

Spycho · Accepted Answer · 2011-08-15 14:16:29Z

1

I would advise you use jQuery for this. It would make it a lot simpler.

Firstly, to create the buttons from an array of button ids you could do something along the lines of the following:

var buttons = ['start', 'stop', 'foo', 'bar'];

for(var i = 0; i < buttons.length; i++){
    $('<button>')
        .attr('id', buttons[i])
        .text(buttons[i])
        .appendTo('div');
}

Next, to listen for the button clicks, you could modify the above as follows:

var buttons = ['start', 'stop', 'foo', 'bar'];
var clicks = [];

for(var i = 0; i < buttons.length; i++){
    $('<button>')
        .attr('id', buttons[i])
        .text(buttons[i])
        .appendTo('div')
        .click(function(){
            clicks.push(this.id);
        });
}

I'm not quite sure what you want to do on-click. Could you elaborate?

Here's a jsFiddle demonstrating the solution.

edited Aug 15, 2011 at 14:16

answered Aug 15, 2011 at 14:06

Spycho

7,7983 gold badges36 silver badges55 bronze badges

1 Comment

myol Over a year ago

Thanks for that, but I will have to take @DaveRandom's version

Alex Turpin · Accepted Answer · 2011-08-15 13:59:58Z

0

Use the event property of the event listener to get the target element, then it's ID:

foo.onclick = function(event) {
    alert(event.target.id);
}

answered Aug 15, 2011 at 13:59

Alex Turpin

47.9k23 gold badges118 silver badges146 bronze badges

Collectives™ on Stack Overflow

Dynamic button javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related