Javascript 为什么'；t链接在何处生成<；span id=”一词；导航链接“&燃气轮机</span>；表明_Javascript_Html_Input_Options_Datalist

Javascript 为什么'；t链接在何处生成<；span id=”一词；导航链接“&燃气轮机</span>；表明

javascript html input

Javascript 为什么'；t链接在何处生成<；span id=”一词；导航链接“&燃气轮机</span>；表明,javascript,html,input,options,datalist,Javascript,Html,Input,Options,Datalist,我一直在尝试获取这段代码的结果，但它似乎不起作用。我想在下面生成一个链接，但是当我预览脚本时，链接似乎没有显示出来。我真的不知道脚本的哪些部分是错误的，我特别感谢任何人在这方面的帮助： <DOCTYPE html> <html> <head> <script> function updateNavigationLink() { var link = "https://maps.google.com/m

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

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


函数updateNavigationLink（）{
变量链接=”https://maps.google.com/maps?saddr=" +
encodeURIComponent（document.getElementById（“start”）.value）+
“&daddr=“+encodeURIComponent（document.getElementById（“end”）.value”）；
document.getElementById（“navigationLink”）.textContent=link；
}
ISHGUIDE
开始：
学校
市中心
完:
学校
市中心

将

onchange

事件位置

数据列表

更改为

输入

，然后创建

元素，然后添加到span

函数updateNavigationLink（）{
var-element=document.createElement（'a'）；
var linkText=document.createTextNode（“映射链接”）；
元素。追加子元素（链接文本）；
element.title=“地图链接”；
变量链接=”https://maps.google.com/maps?saddr=" +
encodeURIComponent（document.getElementById（“start”）.value）+
“&daddr=“+encodeURIComponent（document.getElementById（“end”）.value”）；
element.href=链接；
document.getElementById（'navigationLink'）.appendChild（元素）；
}

ISHGUIDE
开始：
学校
市中心
完:
学校
市中心
一种非常简单的方法，只需对您的代码进行最小的更改即可：
对输入进行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>

不表示输入控件的状态，因此没有onchange=”“
事件或属性。使用
元素的更改
或输入
事件。换句话说，document.getElementById（“start”）。值
将不会得到任何结果。您选择的是整个数据列表，而不是选项。此外，没有body标签，指向css的链接不在head中，classnaviselection需要引号。如果答案有用，您能将此答案标记为正确答案吗？我这样做是因为它更接近我想要的最终产品，而且非常有用。但是，当单击地图链接并生成两个地图链接时，SADD和daddr仍然未定义。尽管如此，有用的代码比确保我更接近我的最终目标。感谢您的帮助。@MohammadAliRony这是不正确的，它不能用于文档.getElementById（“开始”）。值将始终是未定义的，并且在您进行更改时，它将继续追加新的值link@supra28“这是一个不必要的情况，你知道如何解决这个问题吗？”SkanderLejmi我已经补充了一个答案，谢谢你，我十四岁了，刚刚开始工作，所以我一直发现很难完善代码的某些部分，并最终使它们发挥作用。谢谢。只要继续练习，你就会做得很好。：）快乐编码
<span id="navigationLink"></span>

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

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