Javascript 为innerHTML赋值不起作用
在这里寻找第二双眼睛 我调用此函数:Javascript 为innerHTML赋值不起作用,javascript,html,Javascript,Html,在这里寻找第二双眼睛 我调用此函数: customPanel(map, "map2", dirn, document.getElementById("path2"), 1); 在customPanel中,我正在构建html,然后尝试将其分配给页面: 下面是函数,innerHTML位于最底部。如果我在尝试将html分配给div的innerHTML之前抛出警报,它会正确地发出警报: <script type="text/javascript"> var map = ""; funct
customPanel(map, "map2", dirn, document.getElementById("path2"), 1);
在customPanel
中,我正在构建html,然后尝试将其分配给页面:
下面是函数,innerHTML位于最底部。如果我在尝试将html分配给div的innerHTML之前抛出警报,它会正确地发出警报:
<script type="text/javascript">
var map = "";
function customPanel(map, mapname, dirn, div) {
var html = "";
function waypoint(point, type, address) {
var target = '"' + mapname + ".showMapBlowup(new GLatLng(" + point.toUrlValue(6) + "))" + '"';
html += '<table style="border: 1px solid silver; margin: 10px 0px; background-color: rgb(238, 238, 238); border-collapse: collapse; color: rgb(0, 0, 0);">';
html += ' <tr style="cursor: pointer;" onclick=' + target + '>';
html += ' <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px;">';
html += ' <img src="http://maps.gstatic.com/intl/en_us/mapfiles/marker_green' + type + '.png">'
html += ' <\/td>';
html += ' <td style="vertical-align: middle; width: 100%;">';
html += address;
html += ' <\/td>';
html += ' <\/tr>';
html += '<\/table>';
}
function routeDistance(dist) {
html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '<\/div>';
}
function detail(point, num, description, dist) {
var target = '"' + mapname + ".showMapBlowup(new GLatLng(" + point.toUrlValue(6) + "))" + '"';
html += '<table style="margin: 0px; padding: 0px; border-collapse: collapse;">';
html += ' <tr style="cursor: pointer;" onclick=' + target + '>';
html += ' <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; text-align: right;">';
html += ' <a href="javascript:void(0)"> ' + num + '. <\/a>';
html += ' <\/td>';
html += ' <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; width: 100%;">';
html += description;
html += ' <\/td>';
html += ' <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px 0.3em 0.5em; vertical-align: top; text-align: right;">';
html += dist;
html += ' <\/td>';
html += ' <\/tr>';
html += '<\/table>';
}
function copyright(text) {
html += '<div style="font-size: 0.86em;">' + text + "<\/div>";
}
// === read through the GRoutes and GSteps ===
for (var i = 0; i < dirn.getNumRoutes(); i++) {
if (i == 0) {
var type = "A";
} else {
var type = "B";
}
var route = dirn.getRoute(i);
var geocode = route.getStartGeocode();
var point = route.getStep(0).getLatLng();
// === Waypoint at the start of each GRoute
waypoint(point, type, geocode.address);
routeDistance(route.getDistance().html + " (about " + route.getDuration().html + ")");
for (var j = 0; j < route.getNumSteps(); j++) {
var step = route.getStep(j);
// === detail lines for each step ===
detail(step.getLatLng(), j + 1, step.getDescriptionHtml(), step.getDistance().html);
}
}
// === the final destination waypoint ===
var geocode = route.getEndGeocode();
var point = route.getEndLatLng();
waypoint(point, "B", geocode.address);
// === the copyright text ===
copyright(dirn.getCopyrightsHtml());
// === drop the whole thing into the target div
div.innerHTML = html;
}
</script>
编辑#2
根据@user1090190的要求,该页面的公共版本:
我怀疑调用该函数时,
path2
尚未加载。通过PHP生成它并不重要。在引用特定元素之前,必须先等待DOM加载到浏览器中。有两种解决方案:
<body onload="customPanel(map, "map2", dirn, document.getElementById("path2"), 1);">
你不能用一些模板系统吗?也许吧?你能把HTML贴出来吗?或者更好的方法是,在@etm124提供使用此脚本所需的最小HTML。请删除您文章中多余的换行符,以使其更易于阅读。(我知道它们是复制/粘贴工件。)您的代码是否在页面上存在
path2
元素之前运行?@amnotiam,我解释了path2
是如何生成的。PHP正在生成path
和map
div。
foreach($post_entries as $e){
echo "
<div class=\"mapWrapper\">
<div id=\"path" . $increased_counter ."\"> </div>
<div id=\"map" . $increased_counter ."\"> </div>
</div>";
}
<body onload="customPanel(map, "map2", dirn, document.getElementById("path2"), 1);">