Uncaught TypeError：無法設置null的屬性'值'

Question

我一直在fillInAddress函數中發生該錯誤。

這是我的HTML表單：

<div id="locationField"> 
    <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" width="500px"></input> 
</div> 

<form accept-charset="UTF-8" action="/jobs" class="new_job" id="new_job" method="post"> 
    <div class="field"> 
    <label for="job_address">Customer</label><br> 
    <input id="customer" name="job[address]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="job_address">Address</label><br> 
    <input disabled="disabled" id="street_name" name="job[address]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="job_route">Route</label><br> 
    <input disabled="disabled" id="route" name="job[route]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="job_city">City</label><br> 
    <input disabled="disabled" id="locality" name="job[city]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="job_state">State</label><br> 
    <input disabled="disabled" id="administrative_area_level_1" name="job[state]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="job_postal_code">Postal code</label><br> 
    <input disabled="disabled" id="postal_code" name="job[postal_code]" type="text" /> 
    </div> 
    <div class="field"> 
    <label for="job_country">Country</label><br> 
    <input disabled="disabled" id="country" name="job[country]" type="text" /> 
    </div> 
    <div class="actions"> 
    <input name="commit" type="submit" value="Create Job" /> 
    </div> 
</form> 

而我的JS：

<script> 
// This example displays an address form, using the autocomplete feature 
// of the Google Places API to help users fill in the information. 

var placeSearch, autocomplete; 
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 initialize() { 
    // Create the autocomplete object, restricting the search 
    // to geographical location types. 
    autocomplete = new google.maps.places.Autocomplete(
     /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), 
     { types: ['geocode'] }); 
    // When the user selects an address from the dropdown, 
    // populate the address fields in the form. 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    fillInAddress(); 
    }); 
} 

// [START region_fillform] 
function fillInAddress() { 
    // Get the place details from the autocomplete object. 
    var place = autocomplete.getPlace(); 

    for (var component in componentForm) { 
    document.getElementById(component).value = ''; 
    document.getElementById(component).disabled = false; 
    } 

    // Get each component of the address from the place details 
    // and fill the corresponding field on the form. 
    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; 
    } 
    } 
} 
// [END region_fillform] 

// [START region_geolocation] 
// Bias the autocomplete object to the user's geographical location, 
// as supplied by the browser's 'navigator.geolocation' object. 
function geolocate() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var geolocation = new google.maps.LatLng(
      position.coords.latitude, position.coords.longitude); 
     autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, 
      geolocation)); 
    }); 
    } 
} 
// [END region_geolocation] 

    </script> 

表單域都應該當我選擇從自動完成輸入字段的結果來填充。但是，這並沒有發生。當我直接剪切和粘貼這裏的代碼https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform時，它的工作很好。

Answer 1

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

的componentForm第一個屬性是street_number。您的HTML中沒有任何元素，其ID爲street_number。

因此document.getElementById(component)返回null，並document.getElementById(component).value使你引用的null，這會導致錯誤性質value。

看起來屬性的正確名稱應該是street_name，根據您的表單。