为什么 link 在 <span id="navigationLink"></span> 指示的地方不生成

Question

很长一段时间以来，我一直在尝试获取这段代码的结果，但它似乎不起作用。我想在下面生成一个 link，但是当我预览脚本时，link 似乎没有出现。我真的对脚本的错误方式或错误部分一无所知，特别感谢任何人对此的帮助：

<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>

Answer 1

将 onchange 事件放置 datalist 更改为 input 然后创建 a 元素然后添加到跨度。

function updateNavigationLink() {
    var element = document.createElement('a');
    var linkText = document.createTextNode("map link");
    element.appendChild(linkText);
    element.title = "map link";
    var link = "https://maps.google.com/maps?saddr=" +
    encodeURIComponent(document.getElementById("start").value) +
    "&daddr=" + encodeURIComponent(document.getElementById("end").value);
    element.href = link;
      document.getElementById('navigationLink').appendChild(element);

}

<DOCTYPE html>
<html>
<head>
    <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='startinput' id="start" onchange="updateNavigationLink()" />
        <datalist id="startinput" >  
            <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="endinput" id="end" onchange="updateNavigationLink()"/>
        <datalist id="endinput" >
            <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>

Answer 2

一种非常直接的方法，只需对您的代码进行最少的更改即可：

将 onchange 提供给您的输入
为您的输入提供开始和结束 ID

只要把你的输入块改成这个

<input type='text' list='startinput' id="start" onchange="updateNavigationLink()" />
    <datalist id="startinput" >  
        <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>   
<input type="text" id="end" list="endinput" onchange="updateNavigationLink()"/>
        <datalist id="endinput" >
            <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>

您可能还想更改此跨度

<span id="navigationLink"></span>

到带有 href 的 a 标签

<a id="navigationLink"></span>

当您设置值时，您将执行此操作

document.getElementById("navigationLink").href = link;

为什么 link 在 <span id="navigationLink"></span> 指示的地方不生成

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

html

javascript

input

datalist

options