Question

我一直试图获得此代码的结果很长一段时间，但它似乎并没有起作用。我想在下面生成一个链接，但是当我预览脚本时，链接似乎没有显示出来。关于脚本的错误部分或哪些部分是错误的，我真的很无能为力，特别感谢任何人的帮助：

<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元素，然后添加到span。

＆＃13;

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);

}

＆＃13;

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

＆＃13;

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 id="navigationLink"></span>

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

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

为什么链接不会生成<span id =“navigationLink”> </span>指示的位置

2 个答案: