Динамический кнопочный JavaScript - PullRequest
Новая
       24

Динамический кнопочный JavaScript

2 голосов
/ 15 августа 2011

искал руководство по этому вопросу, но не смог найти что-то конкретное, и подумал, что вы, ребята, могли бы помочь.

У меня есть файл javascript, который выполняет различные задачи в загрузке.В настоящее время у меня есть 5 кнопок на HTML-странице, но я хотел бы прочитать это из массива в файле js и динамически создать несколько кнопок в зависимости от того, что было в массиве.

Точно так же я хочукнопки для щелчка, которые нужно прослушивать (изменить массив в js)

У меня есть идея, что я хочу прочитать элементы массива и установить их в качестве идентификаторов кнопок и создать их.Точно так же я хочу послушать, какая кнопка была нажата по ее идентификатору, и сделать так, чтобы она изменила массив.Но как мне на самом деле идти по этому процессу?

Приветствия

Ответы [ 3 ]

2 голосов
/ 15 августа 2011

Как то так ...? 

<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>

РЕДАКТИРОВАТЬ: я только что добавил некоторые функции для отслеживания нажатий кнопок в массиве, как было запрошено в комментарии выше

1 голос
/ 15 августа 2011

Я бы посоветовал вам использовать для этого jQuery. Было бы намного проще.

Во-первых, чтобы создать кнопки из массива идентификаторов кнопок, вы можете сделать что-то вроде следующего: 

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

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

Далее, чтобы прослушивать нажатия кнопок, вы можете изменить вышеперечисленное следующим образом: 

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);
        });
}

Я не совсем уверен, что вы хотите делать при нажатии. Не могли бы вы уточнить?

Вот jsFiddle, демонстрирующий решение.

0 голосов
/ 15 августа 2011

Используйте свойство event прослушивателя событий, чтобы получить целевой элемент, затем его идентификатор: 

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