gpt4 book ai didi

javascript - document.getElementById 不适用于动态 div

转载 作者:行者123 更新时间:2023-12-03 08:36:12 25 4
gpt4 key购买 nike

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

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

最佳答案

最初您将“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);

关于javascript - document.getElementById 不适用于动态 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33208528/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com