为innerHTML赋值无效
Assigning a value to innerHTML not working
在这里寻找第二双眼睛。。。
我调用这个函数:
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>
编辑:
这是所要求的HTML。这只是两个div:
<div class="mapWrapper">
<div id="path2"> </div>
<div id="map2"> </div>
</div>
为了澄清,path2和map2是通过在PHP中循环$_POST
值来动态生成的。这里有一个狙击坑:
foreach($post_entries as $e){
echo "
<div class='"mapWrapper'">
<div id='"path" . $increased_counter ."'"> </div>
<div id='"map" . $increased_counter ."'"> </div>
</div>";
}
编辑#2根据@user1090190的请求,该页面的公共版本:http://qxxiv6yc.myutilitydomain.com/trip-planned
在调用该函数时,我怀疑path2
尚未加载。通过PHP生成它并不重要。您必须先等待DOM在浏览器中加载,然后才能引用特定的元素。有两种解决方案:
-
页面加载后调用函数。即
<body onload="customPanel(map, "map2", dirn, document.getElementById("path2"), 1);">
-
把你所有的Javascript放在的底部
相关文章:
- 未捕获的ReferenceError:赋值中的左侧无效
- 变量赋值无效
- Javascript/Html 未捕获的引用错误:赋值中的左侧无效;未捕获的引用错误:未定义计算
- 样式属性赋值上的“赋值中的左侧无效”
- 左侧赋值无效(railo.transformer.bytecode.op.OpString)
- 在javascript中构建HTML表,得到“引用错误:左侧无效赋值”
- 更改 CSS“z-index”属性:“赋值中的左侧无效”
- Javascript 错误:左侧赋值无效
- 在引用错误中将字符串放在一起:左侧的赋值无效
- 未捕获的引用错误:赋值(匿名函数)中的左侧无效
- jQuery/Javascript赋值左侧无效
- 为innerHTML赋值无效
- 带有三进制if的左侧赋值无效
- 在我必须做的一件简单的事情中,赋值中的左侧无效
- "赋值中的左侧无效“;当接收到来自Facebook API的响应时
- 我得到了“;赋值中的左侧无效“;在我的代码(JS)中
- 变量名称-赋值中左侧无效
- 未捕获的ReferenceError:赋值javascript中的左侧无效
- 如何处理'无效赋值left hand '错误:firefox或chrome
- Javascript ReferenceError:左边无效赋值