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); 
}