document.getElementById 不适用于动态 div答案

【问题标题】：document.getElementById not working for dynamic divsdocument.getElementById 不适用于动态 div
【发布时间】：2015-10-19 07:08:38
【问题描述】：

我正在尝试使用 Google 图表添加 div 元素并在其中绘制图表。但是在绘图函数中，当我尝试使用 document.getelementById() 访问 div 元素时，它给出了 null 并且谷歌函数抛出错误“容器未定义”。我哪里错了？

<!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>

【问题讨论】：

标签： javascript jquery html ajax google-api

【解决方案1】：

最初，您将“i”的值设置为 0，即 div 的 ID“i0”。

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) 返回未定义。

不需要连接“i+1”，只连接“i”

var ele_id = tmp.concat(i);

【讨论】：

谢谢。但问题是 output.innerHTML 似乎正在取代早期的 div。我只能看到“c0”中最近的 div。所以一次只能看到一个饼图:(
所以不要覆盖 output.innerHTML 的内容。仅将 html 内容附加到以前的内容。 output.innerHTML = output.innerHTML + html

【解决方案2】：

您可以尝试使用 jquery 选择器指向 div，在您的情况下是 $('#ele_id') 而不是 document.getElementById(ele_id)

【讨论】：