javascript参数未通过函数

Question

i'm trying to get a user's current city plus whatever argument that's being passed through getCity function when clicked but i'm getting undefined for 'x' variable. here's the code..

<button onclick="getCity('burger')">burger</button>
<button onclick="getCity('steak')">steak</button>
<button onclick="getCity('taco')">taco</button>

<script type="text/javascript">
//get city
function getCity(x) {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPos);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
//get lat and long
function showPos(position) {    
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    //get address
    var geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({
    'location': latlng 
}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    //get city
    if (results[0]) {
        var city = results[0]['address_components'][2].long_name;
        var x = x;
        alert(x +" "+ city); // i'm getting undefined + currentcity
    }
}
});
}
</script>

i'm getting undefined + currentcity. how do i make it so i get burger + currentcity if i click on burger button?

Answer 1

You second last statement

var x = x;

asssigns an undefined x to x. Both "x"s are undefined.

Answer 2

For your script to work you have to declare a global variable

<button onclick="getCity('burger')">burger</button>
<button onclick="getCity('steak')">steak</button>
<button onclick="getCity('taco')">taco</button>
<script type="text/javascript">
var food;
//get city
function getCity(x) {
    if (navigator.geolocation) {
        food = x;
        navigator.geolocation.getCurrentPosition(showPos);
    } else { 
        //x.innerHTML does not work because x is a string not an element
        this.innerHTML = "Geolocation is not supported by this browser.";
    }
}
//get lat and long
function showPos(position) {    
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    //get address
    var geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({
    'location': latlng 
}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    //get city
    if (results[0]) {
        var city = results[0]['address_components'][2].long_name;
        var x = food;
        alert(x +" "+ city);
    }
}
});
}
</script>

Another possible solution would be passing it to pass the x to the showPos function.

<button onclick="getCity('burger')">burger</button>
<button onclick="getCity('steak')">steak</button>
<button onclick="getCity('taco')">taco</button>
<script type="text/javascript">
//get city
function getCity(x) {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position){
            showPos(position, x); 
        });
    } else { 
        //x.innerHTML does not work because x is a string not an element
        this.innerHTML = "Geolocation is not supported by this browser.";
    }
}
//get lat and long
function showPos(position, x) {    
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    //get address
    var geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({
    'location': latlng 
}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    //get city
    if (results[0]) {
        var city = results[0]['address_components'][2].long_name;
        //var x = food;     x is already a parameter of this function so don't declare it again
        alert(x +" "+ city);
    }
}
});
}
</script>