document.getElementById不适用于动态div

我想添加div元素并使用Google图表在它们中绘制图形。但是在绘图函数中，当我尝试使用document.getelementById（）访问div元素时，它给出null并且google函数抛出eror“container not defined”。我哪里出错了？document.getElementById不适用于动态div

<!DOCTYPE html> 
    <html lang="en"> 

    <head> 


     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 


     <title>Test</title> 

     <!-- Bootstrap Core CSS --> 
     <link href="static/css/bootstrap.min.css" rel="stylesheet"> 

     <!-- Custom CSS --> 

     <link href="static/css/bootstrap-multiselect.css" rel="stylesheet"> 

     <!-- Custom Fonts --> 

     <link href="static/lib/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
     <script src="static/js/jquery.js"></script> 
     <script type="text/javascript" src="https://www.google.com/jsapi"></script> 

     <!-- Bootstrap Core JavaScript --> 
     <script src="static/js/bootstrap.min.js"></script> 
     <script src="static/js/bootstrap-multiselect.js"></script> 
     <script src="static/js/Chart.js-master/Chart.js"></script> 




    </head> 

    <body onload = onLoading()> 
    <div class="container"> 
    <div class="col-xs-12"> 

     <div class="page-header"> 
      <h3>BNG Subscriber Analytics</h3>  
     </div> 

     <div class="carousel slide" id="myCarousel"> 
      <nav> 
       <ul class="control-box pager"> 
        <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li> 
        <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li> 
       </ul> 
      </nav> 
      <!-- /.control-box --> 
      <div class="carousel-inner" id="imp"> 
       <div class="item active" id="c0"> 


       </div><!-- /Slide1 --> 



      </div><!-- /Carousel inner --> 




     </div><!-- /#myCarousel --> 

    </div><!-- /.col-xs-12 -->   

    </div><!-- /.container --> 


    <script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    // Carousel Auto-Cycle 
     $(document).ready(function() { 
     $('.carousel').carousel({ 
      interval: 3000 
     }) 
     }); 


    function onLoading() 

    {   
    for(i=0;i<4;i++) 
    { 
     var data = google.visualization.arrayToDataTable([ 
       ['Task', 'Hours per Day'], 
       ['Work',  11], 
       ['Eat',  2], 
       ['Commute', 2], 
       ['Watch TV', 2], 
       ['Sleep', 7] 
      ]); 

     var options = { 
       title: 'My Daily Activities', 
       is3D: true, 
      }; 

     var output = document.getElementById("c0"); 
     var html = '<div class="col-sm-6"><div class="fff"><div class="thumbnail" id="i'+i+'"></div></div></div>'; 
     alert(html); 
     output.innerHTML = html; 
     var tmp = "i"; 
     var ele_id = tmp.concat(i+1); 
     alert(ele_id); 
     google.setOnLoadCallback(drawChart(ele_id,data,options)); 
    } 

    } 
    function drawChart(ele_id,data,options) 
    { 
     google.load("visualization", "1", {packages:["corechart"]});  
     alert(document.getElementById(ele_id)); 
     var chart = new google.visualization.PieChart(document.getElementById(ele_id)); 
     chart.draw(data, options); 
    } 

    </script> 
    </body> 
    </html>

来源

2015-10-19 sklearning

最初，你已经设置了一个 “我” 0值，即Id“i0”到div。

var html = '<div class="col-sm-6"><div class="fff"><div class="thumbnail" id="i'+i+'"></div></div></div>';

在这里，你被一个

var ele_id = tmp.concat(i+1);

递增叫ID为 “I1”

google.setOnLoadCallback(drawChart(ele_id,data,options));

所以document.getElementById(ele_id)回报不确定的功能。

无需Concat的 “I + 1”，只有CONCAT “我”

var ele_id = tmp.concat(i);

来源

2015-10-19 07:18:14

感谢。但问题是output.innerHTML正在替换它看起来较早的div。我只能在“c0”中看到最近的div。因此，一次只能看到一个饼图:( – sklearning

，所以不要覆盖output.innerHTML的内容。仅将html内容附加到以前的内容。 output.innerHTML = output.innerHTML + html –

您可以尝试指向DIV与jQuery选择，你的情况$（ '＃ele_id'）代替的document.getElementById（ele_id）

来源

2015-10-19 07:16:13 Miha2255

document.getElementById不适用于动态div

回答

相关问题