どのように私はhtmlの要素のスタイルを変更することができますdinamically生成？

私はこのコードを持っている：どのように私はhtmlの要素のスタイルを変更することができますdinamically生成？

function createfunc(i) { 
    return function() { 
     document.getElementById('id'+i).style.color='red'; 
     document.getElementById('id'+i).innerHTML = "Paragraph changed!"; 
    } 
} 
function onDeviceReady() { 
    var olnew = document.createElement("ul"); 
    for (i = 0; i < 10; i++){ 
     var newLi = document.createElement("li"); 
     var title = document.createElement('h2'); 
     title.id="id"+i; 
     title.innerHTML = i; 
     newLi.appendChild(title); 
     newLi.onclick =createfunc(i); 
     olnew.appendChild(newLi); 
    } 
}

しかし、私はli要素をクリックしたとき、それは色やテキストを変更しない

おかげで非常に多くの

UPDATE

元のコードがあると：

<html> 
    <head> 
    <script> 
     function createfunc(i) { 
     return function() { 
      document.getElementById('id'+i).style.color='red'; 
      document.getElementById('id'+i).innerHTML = "Paragraph changed!"; 
          } 
           } 
     function onDeviceReady() { 
      var olnew = document.getElementById('ordenes'); 
      for (i = 0; i < 10; i++){ 
       var newLi = document.createElement("li"); 
       var title = document.createElement('h2'); 
       title.id="id"+i; 
       title.innerHTML = i; 
       newLi.appendChild(title); 
       newLi.onclick =createfunc(i); 
       olnew.appendChild(newLi); 
            } 
        } 
     </script> 
    </head> 
    <body onload="onDeviceReady();"> 
     <div id="layout"> 
      <ul id="ordenes" ></ul> 
     </div> 
    </body> 
</html>

電子の李、変化なし、のli要素は、IDを持っていますが、代わりにイベントが呼び出され、要素のchildを選択するために、querySelectorを使用しているElementを表しhandler-functionでthisコンテキストを使用し、ID属性を維持するの

出典

2016-06-29 gurrumo

ワーキングfine..Whereあなたは 'UL'要素を付加していますか？ – Rayon

実行可能なデモ/スニペットや[JSFiddle]（https://jsfiddle.net/）を共有できますか？ [最小限で完全で検証可能な例を作成します] – Rayon

コードを更新しました。ありがとうございます。 – gurrumo

に動作しません。

function createfunc() { 
 
    this.querySelector('h2').style.color = 'red'; 
 
    this.querySelector('h2').innerHTML = "Paragraph changed!"; 
 
} 
 

 
function onDeviceReady() { 
 
    var olnew = document.getElementById('ordenes'); 
 
    for (var i = 0; i < 10; i++) { 
 
    var newLi = document.createElement("li"); 
 
    var title = document.createElement('h2'); 
 
    title.innerHTML = i; 
 
    newLi.appendChild(title); 
 
    newLi.onclick = createfunc; 
 
    olnew.appendChild(newLi); 
 
    } 
 
}

<body onload="onDeviceReady();"> 
 
    <div id="layout"> 
 
    <ul id="ordenes"></ul> 
 
    </div> 
 
</body>

出典

2016-06-29 18:15:25 Rayon

ありがとう、非常に、私は学ぶ必要がある多くのもの – gurrumo

どのように私はhtmlの要素のスタイルを変更することができますdinamically生成？

答えて

関連する問題