Question

I’m attempting to modify a Google maps API v3 direction script. I thought I had a firm grasp of combining variables etc but then I ran into this problem:

function calcRoute() {
    var end = document.getElementById("start").value;
    var street = document.getElementById("street").value;
    var city = document.getElementById("city").value;
    var state = document.getElementById("state").value;
    var zip = document.getElementById("zip").value;
    var start = street + ' ' + city + ' ' + state + ' ' + zip;

    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

If I create an input with an id of start and change

var start =  document.getElementById("start").value; 

the script works again. however I can’t get my combined variable to work:

var start = street + ' ' + city + ' ' + state + ' ' + zip;

if i make a button to alert(start) it returns null… what am I doing wrong?

Update: Also of note,

if I run:

onClick="alert(end)"

while

<input id="end" name="destination" type="hidden" value="test" />

the alert returns “object HTMLInputElement” not “test” as it should.

Answer 1

If you want to alert the value of the “end” input you need to do:

onClick="alert(document.getElementById('end').value)"

As for your start being null problem, I don’t believe that one of the variables was null, if I try this:

null + " " + null

I get “null null” (tested both on chrome and firefox).
And so, my question is: where do you try to access the “start” variable from? Is it from inside the function in which it was defined in or outside of it? You can’t access that variable from outside the calcRoute function.

So if you are doing something like:

<input type="button" onclick="alert(start)" />

It’s bound to fail, instead do something like this:

var start;
function calcRoute() {
    var end = document.getElementById("start").value;
    var street = document.getElementById("street").value;
    var city = document.getElementById("city").value;
    var state = document.getElementById("state").value;
    var zip = document.getElementById("zip").value;
    start = street + ' ' + city + ' ' + state + ' ' + zip;

.....