Javascript not initiating for getElementByID

Question

當用戶輸入地址時，它應該將地址放入隱藏的輸入字段中。 javascript不會觸發並寫入隱藏的輸入字段的值。

我相信它可能是javascript/jquery沒有以正確的順序執行，或者我有版本衝突問題？

我有一個谷歌地址自動完成

var placeSearch, autocomplete; 
// Need to add Lat/Long to populate field. 
var componentForm = { 
    street_number: 'short_name', 
    route: 'long_name', 
    locality: 'long_name', 
    administrative_area_level_1: 'short_name', 
    country: 'long_name', 
    postal_code: 'short_name', 

}; 

function initAutocomplete() { 
    autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), { 
    types: ['geocode'] 
    }); 
    autocomplete.addListener('place_changed', fillInAddress); 
} 

function fillInAddress() { 
    var place = autocomplete.getPlace(); 
    for (var component in componentForm) { 
    document.getElementById(component).value = ""; 
    document.getElementById(component).disabled = true; 
    } 
    for (var i = 0; i < place.address_components.length; i++) { 
    var addressType = place.address_components[i].types[0]; 
    if (componentForm[addressType]) { 
     var val = place.address_components[i][componentForm[addressType]]; 
     document.getElementById(addressType).value = val; 
    } 
    } 
    document.getElementById("Latitude").value = place.geometry.location.lat(); 
    document.getElementById("Longitude").value = place.geometry.location.lng(); 
} 
google.maps.event.addDomListener(window, "load", initAutocomplete); 

我有輸入字段

   <input type="hidden" value="" class="form-control" id="street_number" name="pnumb"> 
       <input type="hidden" value="" class="form-control" id="route" name="paddy"> 
       <input type="hidden" value="" class="form-control" id="locality" name="pcity"> 
       <input type="hidden" value="" class="form-control" id="administrative_area_level_1" name="pstat"> 
       <input type="hidden" value="" class="form-control" id="postal_code" name="pzip"> 
       <input type="hidden" value="" class="form-control" id="Latitude" name="plat"> 
       <input type="hidden" value="" class="form-control" id="Longitude" name="plong"> 

這是JavaScript的jQuery我有我的頁面的頂部。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

這就是頁面底部的內容。

<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script> 
<script src="../../bootstrap/js/bootstrap.min.js"></script> 
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script> 
<script src="../../plugins/fastclick/fastclick.js"></script> 
<script src="../../dist/js/app.min.js"></script> 
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script> 
<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script> 
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script> 

我收到以下錯誤代碼從控制檯

1.) ReferenceError: google is not defined[Learn More] 
2.) TypeError: document.getElementById(...) is null[Learn More] 

我也有與試圖利用日期選擇問題。

我相信我有我的javascript/jquery執行不當嗎？

任何想法;我很可怕的JavaScript/jQuery的

Answer 1

我不得不從我componentFrom變量刪除country: 'long_name',。我沒有爲它定義輸入字段，導致它打破了js。

Answer 2

好了，也有可能需要兩個不同的分析兩種不同的錯誤：

1）的ReferenceError：沒有定義谷歌[瞭解更多]

不第一個JavaScript代碼成功的腳本標籤？如果你在聲明它之前嘗試使用某些東西，你會得到一個參考錯誤。

作爲更加明確你的代碼必須按以下順序：

<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script> 
... 
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script> 

<script> 
    var placeSearch, autocomplete; 
    // Need to add Lat/Long to populate field. 
    ... 

    google.maps.event.addDomListener(window, "load", initAutocomplete); 
</script> 

2）類型錯誤：的document.getElementById（...）爲空[瞭解詳情]

我們可以前告訴你我們需要知道什麼是解決方案，你正在對document.getElementById進行幾次調用，你的瀏覽器是否顯示哪一行觸發了錯誤？

編輯：我看你沒有列出自動完成控件的輸入，它是否出現在你的代碼中的其他任何地方？

你應該可以看到一個輸入一個id = 「自動完成」，就像這樣：

<input type="hidden" value="" class="form-control" id="autocomplete" name="pautocomplete"> 

Answer 3

可能的解決方案如下陳述：

＃第1步：刪除第二jQuery的版本加載：

.... 
<!--<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>--> 
<script src="../../bootstrap/js/bootstrap.min.js"></script> 
.... 

＃步驟2：我看不到Google MAP's Place Autocomplete Javascript API在鱈魚Ë;它包含：

<!-- with a callback function 'initMap' --> 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script> 

＃步驟3：結束語只是你的JS代碼的最後一行象下面這樣：

function initMap(){ 
    google.maps.event.addDomListener(window, "load", initAutocomplete); 
}