为什么链接不生成 指示的地方答案

【问题标题】：Why doesn't the link generate where indicates为什么链接不生成 指示的地方
【发布时间】：2018-11-12 15:09:10
【问题描述】：

我一直在尝试获取这段代码的结果，但它似乎不起作用。我想在下面生成一个链接，但是当我预览脚本时，链接似乎没有出现。我真的不知道脚本的哪些部分是错误的，并且特别感谢任何人对此的帮助：

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

【问题讨论】：

<datalist> 不代表输入控件的状态，因此没有onchange="" 事件或属性。请改用<input /> 元素的change 或input 事件。
换句话说，document.getElementById("start").value 将一无所获。您正在选择整个数据列表，而不是一个选项。也没有body标签，指向css的链接不在head和class naviselection需要引号。

标签： javascript html input options datalist

【解决方案1】：

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

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>

【讨论】：

如果这个答案有用，你能把这个答案标记为正确吗？
我已经这样做了，因为它让我更接近我想要的最终产品，并且非常有帮助。但是，当单击地图链接并生成两个地图链接时，saddr 和 daddr 仍然未定义。尽管如此，有用的代码比确保我更接近我的最终目标。感谢您的帮助。
@MohammadAliRony 这是不正确的，它不起作用 document.getElementById("start").value 将始终未定义，并且当您进行更改时，它将继续附加新链接
@supra28 这是一个非常不受欢迎的情况，你知道如何解决这个问题吗？
@SkanderLejmi 我已经添加了答案

【解决方案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;

【讨论】：

谢谢你，我 14 岁，刚刚开始，所以我一直在完善我的代码的某些部分并最终使它们发挥作用时遇到困难。谢谢。
继续练习，你会做得很好。 :) 快乐编码