訪問div元素

我已經創建了一個網站，我有一個ID爲「按鈕」的div元素。下面你看到我如何創建按鈕與他們的字母表。一切都很好，它的作品。但是現在我只能訪問26個按鈕中的一個按鈕/一個字母......以便我可以更改一個按鈕的不透明度。（我只是可以處理它，所有這些都變得更加透明！）也許有人可以幫助我 - 謝謝！訪問div元素

var buttons = function() { 
    myButtons = document.getElementById("buttons"); 
    letters = document.createElement('ul'); 
    for (var i = 0; i < alphabet.length; i++) { 
     letters.id = 'alphabet'; 
      list = document.createElement('li'); 
      list.id = 'letter'; 
      list.innerHTML = alphabet[i]; 
     check(); 
      myButtons.appendChild(letters); 
      letters.appendChild(list); 
     } 
    }

來源

2016-11-16 babschili

創建一個codepen或小提琴，以便我們可以看到問題是什麼。 – Aslam

@hunzaboy - 有沒有必要訴諸第三方網站：https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ – Quentin

你不能添加一個額外的'id'到字母表按鈕，然後用CSS指向相關的'id'？將'list.id ='letter''改成'list.id = alphabet [i]'也許 – Aidin

您可以list.id='letter' + i設置列表元素的ID。

然後你可以訪問每個按鈕與document.getElementById('letter<i>') - 第一個document.getElementById('letter0')等。

您應該將letters.id = 'alphabet';移動到for循環之外，因爲您不必在每個循環中設置該id。

來源

2016-11-16 09:39:19 Piu130

我更新了你的代碼，你可以看到這個例子。

實施例：

var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; /*Just Defined for this snipped test*/ 
 

 
var buttons = function (ID) { 
 
    var ul = document.createElement('ul'); 
 
    ul.id = 'alphabet'; 
 
    for (var i = 0; i < alphabet.length; i++) { 
 
      li = document.createElement('li'); 
 
      li.id = 'letter'+i; /*id="letter0",id="letter1",...*/ 
 
      li.innerHTML = alphabet[i]; 
 
      /*check();*/ 
 
      ul.appendChild(li); 
 
     } 
 
    ID.appendChild(ul); 
 
    } 
 

 
var myButtons = document.getElementById("buttons"); 
 
buttons(myButtons); /*Called the function and pass the Object for append*/

<div id="buttons"></div>

從上面的片段生成的HTML代碼：

<div id="buttons"> 
    <ul id="alphabet"> 
     <li id="letter0">A</li> 
     <li id="letter1">B</li> 
     <li id="letter2">C</li> 
     ....................... 
     <li id="letter25">Z</li> 
    </ul> 
</div>

所以，可以使用不同的01每。或者您可以通過更新您的代碼更改CSS從button()函數。

來源

2016-11-16 10:18:15

謝謝！它現在有效！ – babschili

不客氣！ :) @babschili –

您不可以對不同的元素使用相同的ID（您已經創建了多個元素並給出了相同的ID）。

這裏是另一種解決您所示問題的方法。（不使用「id」字段），只是因爲你已經有了很好的使用「id」屬性的正確答案。

<!doctype html> 
<html> 
    <head> 
     <title> 
      Test 
     </title> 
     <script type='text/javascript'> 
      'use strict'; 
      var m_Buttons = []; 
      function Init() { 
       var myButtons = document.getElementById("buttons"); 
       var alphabet = ['a','b','c','d','e','f','g']; //go on with letters yourself 
       var ul = document.createElement('ul'); 
       var li = null; 
       for (var i=0; i<alphabet.length; i++) { 
        li = document.createElement('li'); 
        li.innerHTML = alphabet[i]; 
        ul.appendChild(li); 
        m_Buttons.push (li); 
       } 
       myButtons.appendChild(ul); 
      } 

      function getButton(button_index) { 
       m_Buttons[button_index].style.color = 'red'; 
       return Buttons[button_index]; 
      } 
     </script> 
    </head> 
    <body onload='Init();'> 
     <div id='buttons'> 
     </div> 
     <button onclick='getButton(3);'> Click to get button 3 </button> 
    </body> 
</html>

來源

2016-11-16 10:42:14

回答

相關問題