find-it.js

window.onload = function() {
    document.getElementById('find').onclick = findRequest;
};

function findRequest() {
    var from = document.getElementById('from').value;
    var to = document.getElementById('to').value;

    var ajax = new XMLHttpRequest();
    ajax.onload = injectDirections;
    ajax.open('GET', 'find-it.php?from=' + from + '&to=' + to, true);
    ajax.send();
}

function injectDirections() {
    directions = this.responseXML.getElementsByTagName('direction');

    var txt='';
    for (var i = 0; i < directions.length; i++) {
        txt+="<li>";
        var direction = directions[i];
        var turn = direction.getAttribute('turn');
        var distance = direction.getAttribute('distance');
        var street = direction.getAttribute('street');

        txt+='<img src="'+turn+'.png'+'">';
        if (street) {
            txt+=" in "+distance+" miles turn "+turn+" on "+street;
        } else {
            var directionlist = this.responseXML.getElementsByTagName('directionlist');
            txt+=" in "+distance+" miles arrive at "+directionlist[0].getAttribute('to');
        }
        txt=txt + '</li>';
    }
    document.getElementById('directions').innerHTML += txt;
}