javascriptのループされた動的divに画像を作成します

お願いします。私は画像やテキストを含む4つの内部div（列）を持つ同じ100div（行）を作成する必要があるプロジェクトに取り組んでいます。最初の内側div（列）は、最初の行から最後の（100）まで同じ矢印を持つ必要があります。javascriptのループされた動的divに画像を作成します

私は何度も試してみましたが、最初の行には矢印が表示されています。

添付はマイ・コードです。 HTMLとJavaScript

<html> 
    <head> 
    <title>TODO supply a title</title> 
    <link href="index.css" rel="Stylesheet"/> 
    </head> 
    <body> 
    <div id="bodydiv"> <div id="leftdiv" > 
    <script type="text/javascript" >multidivs();</script></div> 
    </body> 
</html> 


function multidivs(){ 
    var columnnames= 
    ["arrowdiv","contentdiv","ccontentdiv","rcontentdiv"];//styles for 
innerdiv 
    var columnids=["arrow", "content", "ccontent", "rcontent"]; 

    for(x=0; x<100;x++) { 

    var row= document.createElement('div'); 
    row.className = "innerdiv"; 
    //define for the inner divs 
    // attachImage(); 
    for(i=0; i<4; i++){ 
     var columndiv = document.createElement('div'); 
     /* var img =document.createElement("img"); 
     img.className= "imgdiv"; 
     img.src="images/orangearrow.png"; 
     //var img =document.createElement("img");*/ 
     columndiv.className =columnnames[i]; 
     columndiv.id=columnids[i]; 
    if(columndiv.className=== columnnames[0]){ 
     attachImage(); 
    } 
    // columndiv.className=columnnames[0].appendChild(img); 
    row.appendChild(columndiv); 
    } 
    document.getElementById('leftdiv').appendChild(row); 

    } 
    // attachImage(); 
} 
    function attachImage(){ 
    var img =document.createElement('img'); 
    img.className= "imgdiv"; 
    img.src="images/orangearrow.png"; 

    var par= document.getElementById('arrow'); 
    par.appendChild(img); 
    }

出典

2017-10-13 Kelly Blue

を呼び出すことができます。 elemntをIDでフェッチしているとき、DOM.Alsoに複数の要素に同じIDを使用しないことを推奨しますので、実際にはnullを返しています。

 function multidivs(){ 
      var columnnames = ["arrowdiv","contentdiv","ccontentdiv","rcontentdiv"];//styles for 

      var columnids=["arrow", "content", "ccontent", "rcontent"]; 

      for(var x=0; x<100;x++) { 

       var row= document.createElement('div'); 
       row.className = "innerdiv"; 
//define for the inner divs 
// attachImage(); 
       for(var i=0; i<4; i++){ 
        var columndiv = document.createElement('span'); 
        /* var img =document.createElement("img"); 
        img.className= "imgdiv"; 
        img.src="images/orangearrow.png"; 
        //var img =document.createElement("img");*/ 
        columndiv.className =columnnames[i]; 
        columndiv.id=columnids[i]; 
        if(columndiv.className=== columnnames[0]) 
        { 
         attachImage(columndiv); 
        } 
// columndiv.className=columnnames[0].appendChild(img); 
        row.appendChild(columndiv); 
       } 
       document.getElementById('leftdiv').appendChild(row); 

      } 
// attachImage(); 
     } 
     function attachImage(columndiv){ 
      var img =document.createElement('img'); 
      img.className= "imgdiv"; 
      img.src="images/orangearrow.png"; 
      columndiv.appendChild(img); 
     }

出典

2017-10-13 01:19:52 Gautam

ありがとう、それは働いた！ –

あなたは大歓迎です、サー。 – Gautam

実際に女性。ありがとうございます –

問題は、あなたがattachImage()でdocument.getElementById('arrow')を呼び出すとき、それは常に最初の要素を返すようにあなたがid="arrow"で複数のdiv要素を作成することです。

単純な解決策は、attachImage()関数にDOMオブジェクトを渡すことができるということです。

例えば

function attachImage(par){ 
    var img =document.createElement('img'); 
    img.className= "imgdiv"; 
    img.src="images/orangearrow.png"; 

    par.appendChild(img); 
}

とあなたのmultidivs()機能で、あなたは、これはあなたの問題を解決します試してみてくださいattachImage(columndiv)

出典

2017-10-13 01:06:50

ありがとう、これはまた、説明に洞察力のために働いてくれてありがとう、私は今なぜ参照してください。ありがとうございました。 –

javascriptのループされた動的divに画像を作成します

答えて

関連する問題