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

回答

相關問題