Question

我创建了一个网站，在那里我有一个id为“按钮”的div元素。下面你看看我如何创建带有字母的按钮。一切都很好，它的工作原理。但是现在我必须只能访问26个按钮中的一个按钮/一个字母..这样我就可以改变一个按钮的不透明度。（我只能处理它，所有这些都变得更透明！）也许有人可以帮助我 - 谢谢！

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

Answer 1

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

然后，您可以使用document.getElementById('letter<i>')访问每个按钮 - 第一个document.getElementById('letter0')，依此类推。

您应该将letters.id = 'alphabet';移到for循环之外，因为您不必在每个循环中设置ID。

Answer 2

我更新了您的代码，您只需看一下示例。

示例：

＆＃13;
＆＃13;
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*/
＆＃13;
<div id="buttons"></div>
＆＃13;
＆＃13;
＆＃13;

从以上代码段生成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>

因此，您可以为每个CSS使用不同的ID's。或者，您可以通过更新代码来更改CSS button()功能。

Answer 3

您不能对不同的元素使用相同的ID（您创建了多个元素并为其提供了相同的ID）。

这是解决您所显示问题的另一种方法。（不使用＆＃34; id＆＃34;字段），只是因为你已经使用＆＃34; id＆＃34;财产得当。

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

访问div元素

3 个答案: