Add the
onchange
attributes to the
<input>
tags, not the
<datalist>
tags.
You also need to read the value from the
<input>
elements, not the
<datalist>
elements.
Start:
<input id="startText" type="text" list="start" onchange="updateNavigationLink()">
<datalist id="start">
...
</datalist>
End:
<input id="endText" type="text" list="end" onchange="updateNavigationLink()">
<datalist id="end">
...
</datalist>
function updateNavigationLink() {
var link = "https://maps.google.com/maps?saddr="
+ encodeURIComponent(document.getElementById("startText").value)
+ "&daddr=" + encodeURIComponent(document.getElementById("endText").value);
document.getElementById("navigationLink").textContent = link;
}
Demo[
^]
NB: textContent
will set the text of the element; any HTML tags will be removed. If you want a working link, use
innerHTML
to add an
<a>
tag to the element instead.
function updateNavigationLink() {
var link = "https://maps.google.com/maps?saddr="
+ encodeURIComponent(document.getElementById("startText").value)
+ "&daddr=" + encodeURIComponent(document.getElementById("endText").value);
document.getElementById("navigationLink").innerHTML = "<a href='" + link + "' target='_blank'>View map</a>";
}
Demo[
^]