为 innerHTML 赋值不起作用答案

【问题标题】：Assigning a value to innerHTML not working为 innerHTML 赋值不起作用
【发布时间】：2012-03-06 04:09:51
【问题描述】：

在这里寻找第二双眼睛......

我正在调用这个函数：

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

【问题讨论】：

呃，你不能使用某种模板系统吗？ This one 或许？
你能发布 HTML 吗？或者更好的是，在jsfiddle.net 处提供使用此脚本所需的最小 HTML
@etm124 请删除帖子中多余的换行符，以便于阅读。（我知道它们是复制/粘贴工件。）
您的代码是否在页面上存在path2 元素之前运行？
@amnotiam ，我解释了path2 是如何生成的。 path 和 map div 是由 PHP 生成的。

标签： javascript html

【解决方案1】：

我怀疑path2 在您调用该函数时尚未加载。您通过 PHP 生成它并不重要。您必须先等待 DOM 在浏览器中加载，然后才能引用特定元素。有两种解决方案：

页面加载后调用该函数。即

<body onload="customPanel(map, "map2", dirn, document.getElementById("path2"), 1);">

把你所有的 Javascript 放在底部

【讨论】：