在javascript中的環形動態div上創建圖像

請幫助我。我正在研究一個需要創建具有四個包含圖像或文本的內部div（列）的相同100divs（行）的項目。第一個內部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

嘗試，這將解決您的問題。當你通過id獲取elemnt時，實際上它會返回null，因爲你沒有將它附加到DOM上。並且我建議不要爲多個元素使用相同的ID。

 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

女士其實。謝謝 –

問題是你創建id="arrow"多格，這樣當你在attachImage()調用document.getElementById('arrow')，它總是返回的第一個元素。

一個簡單的解決方案是，可以傳遞DOM對象attachImage()功能。

例如

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上創建圖像

回答

相關問題