Javascript等同于变量.value

Question

This is the code I'm working from: http://jsfiddle.net/9B84H/26/

function autosuggest() {
var input = document.getElementById('location');
    var options = {types: [],};
    var autocomplete = new google.maps.places.Autocomplete(input, options);
}

function getLatLng() {
    var geocoder = new google.maps.Geocoder();
    var address = document.getElementById('location').value;
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            $('#lat').val(results[0].geometry.location.lat());
            $('#lng').val(results[0].geometry.location.lng());
        } else {
            alert("Geocode failed: " + status);
        }
    });
}

There are two variables which are pretty much the same​:

var address = document.getElementById('location').value;
var input = document.getElementById('location');

Is there any opportunity to combine this into one line as a global variable?

Answer 1

You could use your anonymous self invoking function or just use the dom-ready method in jQuery to wrap your code (dom-ready seems like a better idea if you don´t put your JS code at the bottom of the page).

I did an example removing the onclick, onfocus attribute on your input and put them in the javascript section: http://jsfiddle.net/9B84H/27/

$(function() {
    var location = document.getElementById('location');
    var getLatLng = function() {
        var geocoder = new google.maps.Geocoder();
        var address = location.value;
        geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                $('#lat').val(results[0].geometry.location.lat());
                $('#lng').val(results[0].geometry.location.lng());
                alert("Geocode success");
            } else {
                alert("Geocode failed: " + status);
            }
        });
    };
    var autosuggest = function() {
        var options = {types: []};
        var autocomplete = new google.maps.places.Autocomplete(location, options);
    };
    $("#location").on("focus", autosuggest);
    $(":button[name='Geocode']").on("click", getLatLng);
});

you now have a local variable named location that reference the #location element in your document.