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

访问div元素

回答

相关问题