Why doesn't the link generate where <span id="navigationlink"></span> indicates

Question

0.00/5 (No votes)

See more:

I've been trying to obtain the outcome of this code for quite a while but it just doesn't seem to work. I want a link to be generated below but when I preview the script, the link doesn't seem to show up. I am genuinely clueless as to how or which parts of the script is wrong and would particularly appreciate anyones help on this:

<DOCTYPE html>
    <html>
    <head>
        <script>function updateNavigationLink() {
    var link = "https://maps.google.com/maps?saddr=" + encodeURIComponent(document.getElementById("start").value) + "&daddr=" + encodeURIComponent(document.getElementById("end").value);
    document.getElementById("navigationLink").textContent = link; }
        </script>
        
        <meta charset="utf-8">
        <title>ISHGUIDE</title>
        </head>
        <link rel="stylesheet" type="text/css" href="style.css">
       
    <div class=naviselection>
      Start:
      <input type='text' list='start' />
      <datalist id="start" onchange="updateNavigationLink()">  
            <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
            <option value="Centrum, Den Haag">City Center</option>
      
            </datalist> End:
            <input type="text" list="end" />
            <datalist id="end" onchange="updateNavigationLink()">
            <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
            <option value="Centrum, Den Haag">City Center</option>
      
            </datalist>

</div>
        
<div class=Finallink>
<span id="navigationLink"></span> 
    
</div>
    </html>

What I have tried:

I've tried a multitude of things, someone on this platform recently helped me with some of the above but since the new addition has been introduced the script no longer works as it used to, I evidently still have the script but need help for finding the issue with the script above.

Posted 2-Jun-18 9:57am

Member 13855652

Updated 4-Jun-18 4:04am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2018-06-04T04:05:00

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.

HTML

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>

Javscript

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.

Javscript

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[^]