div要素へのアクセス

私はwebsideを作成しました。そこには、idというボタンを持つdiv要素があります。下にアルファベットのボタンをどのように作成するかをご覧ください。すべてうまく動作します。しかし、今私は1つのボタン/ 26のボタンの1つの文字にアクセスする必要があります。私は1つのボタンの不透明度を変更することができます。（私はちょうどそれらすべてがより透明になることをそれを扱うことができます！）多分誰かが私を助けることができる - 感謝！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

問題の原因を確認できるように、コードペインまたはフィドルを作成します。 – 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')などです。

forループの外側にletters.id = 'alphabet';を移動する必要があります。なぜなら、すべてのループで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を使用することができますID'sごとにまたは、コードを更新してCSSをbutton()から変更できます。

出典

2016-11-16 10:18:15

ありがとう！それは今働く！ – babschili

あなたはようこそ！ :) @babschili –

異なるIDに同じ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

答えて

関連する問題