为什么链接没有生成 <span id= "navigationLink" >指示的位置</span>

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

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

一种非常简单的方法是：

为您的输入提供更改
为输入提供开始和结束 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>

到 A 标记与 href

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

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

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

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

相关内容

最新更新

热门标签：