嘗試從innerhtml調用Javascript函數

Question

我試圖在單擊按鈕時顯示地圖。我的代碼如下。

  List.innerHTML = '<input type="button" value="Click me" onclick="'+calcRoute()+'">';

    function calcRoute() {
                var start = "san bernardino, ca";
                var end = "los angeles, ca";
                var request = {
                    origin:start,
                    destination:end,
                    travelMode: google.maps.TravelMode.DRIVING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        return directionsDisplay.setDirections(response);
                    }
                });
    }

調試時calcRoute顯示為未定義。 單擊按鈕后，我想顯示兩個興趣點之間的方向。

Answer 1

構建HTML時，您正在調用calcRoute函數：

List.innerHTML = '<input type="button" value="Click me" onclick="'+calcRoute()+'">';
// ----------------------------------------------------------------^^^^^^^^^^^

但是calcRoute不返回任何內容，因此您實際上是在說：

List.innerHTML = '<input type="button" value="Click me" onclick="' + undefined + '">';

也許您只想要：

List.innerHTML = '<input type="button" value="Click me" onclick="calcRoute()">';

因此，當您單擊按鈕時，將調用calcRoute 。