は...ここに目の第二セットをお探し

Question

を働いていない私は、この関数を呼び出しています

をinnerHTMLプロパティに値を割り当てますそれをページに割り当てます：

ここで関数は、innerHTMLが一番下にあります。私は警告をスローした場合、私はdiv要素のinnerHTMLプロパティにHTMLを割り当てようとする前に、それが正しく警告：

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

EDIT：要求されたとして、ここでは

はHTMLです。

<div class="mapWrapper"> 
    <div id="path2"> </div> 
    <div id="map2"> </div> 
</div> 

明確にするために、パス2およびMAP2はPHPで$_POST値をループによって動的に生成されています：それは、ちょうど2つのdiv要素です。ここsnippitは次のとおりです。

foreach($post_entries as $e){ 
echo " 
<div class=\"mapWrapper\"> 
    <div id=\"path" . $increased_counter ."\"> </div> 
    <div id=\"map" . $increased_counter ."\"> </div> 
</div>"; 
} 

EDIT＃2 @ user1090190によって要求されたよう 、ページの公開バージョン： http://qxxiv6yc.myutilitydomain.com/trip-planned

Answer 1

あなたがいることを呼び出すときに、私はpath2がすでにロードされていないと思われます関数。 PHPで生成しても問題ありません。特定の要素を参照する前に、ブラウザでDOMがロードされるのを待たなければなりません。これには2つの解決策があります。

1. ページロード後に関数を呼び出します。私。

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

2. 下