動態按鈕javascript

在這方面找了一份指南，但找不到任何具體的東西，並認爲你們可以提供幫助。動態按鈕javascript

我有一個javascript文件，它執行各種任務onLoad。目前，我在HTML頁面中有5個按鈕，但我想要做的是從js文件中的數組讀取數據，並根據數組中的內容動態創建多個按鈕。

同樣地，我想在點擊的按鈕是「聽」的（改變在JS數組）

我有我想要閱讀的數組元素，並將它們設置爲按鈕的ID，並創建一個想法他們。同樣，我想要聽哪個按鈕被其ID所點擊並讓它改變一個數組。但是我怎麼真的去做這個過程呢？

乾杯

2011-08-15 myol

評論你能解釋正是你想要的是單擊按鈕時該怎麼辦？ – DaveRandom

如果我有一個數組; arr = [0,1,2,4]我想用這些ID創建按鈕，一旦按鈕被創建，我想要改變一個不同的數組，取決於按鈕被點擊了;例如，一個ID = 2的按鈕和單擊arr2 = [0,1,3]的按鈕，然後將該數組更改爲arr2 = [0,1,2,3] – myol

非常好，我採取了瘋狂的猜測，在我的解決方案。它的行爲不像一個集合，但是...如果你點擊兩次按鈕，它會被添加到arr2兩次。那是你要的嗎？或者你想只添加一次？ – Spycho

這樣的事情......？

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

編輯：我只是增加了一些功能來跟蹤陣列中的按鈕按下的要求，在上述

來源

2011-08-15 14:07:50 DaveRandom

我可以使用它來播放一些內容，因爲我現在可以看到發生了什麼。謝謝。 – myol

使用事件偵聽器的event屬性來獲取目標元素，那麼它的ID：

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

來源

2011-08-15 13:59:58

我會建議你使用jQuery這一點。這會使它簡單得多。

首先，從按鈕ID數組創建按鈕，你可以做一些大致如下的行：

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

我不太清楚你想要做什麼點擊。你能詳細說明一下嗎？

Here's a jsFiddle展示解決方案。

來源

2011-08-15 14:06:40 Spycho

感謝您的支持，但是我將不得不採取@DaveRandom的版本 – myol

動態按鈕javascript

回答

相關問題