在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上创建图像

回答

相关问题