为什么链接不会生成< span id =" navigationlink">< / span>指示 [英] Why doesn't the link generate where <span id="navigationlink"></span> indicates
问题描述
我一直试图获得这段代码的结果很长一段时间，但它似乎没有用。我想在下面生成一个链接，但是当我预览脚本时，链接似乎没有显示出来。我真的很不知道脚本是如何或哪些部分是错误的，特别感谢任何人的帮助：
I've been trying to obtain the outcome of this code for quite a while but it just doesn't seem to work. I want a link to be generated below but when I preview the script, the link doesn't seem to show up. I am genuinely clueless as to how or which parts of the script is wrong and would particularly appreciate anyones help on this:
<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>
我尝试过：
我已经尝试了很多东西，这个平台上的某个人最近帮助了我上面的一些但是因为新的添加已经被引入，脚本不再像过去那样工作了，我显然仍然有脚本，但需要帮助找到上述脚本的问题。
What I have tried:
I've tried a multitude of things, someone on this platform recently helped me with some of the above but since the new addition has been introduced the script no longer works as it used to, I evidently still have the script but need help for finding the issue with the script above.
推荐答案
添加onchange属性为< input>标记，而不是< datalist>标记。
您还需要读取< input>元素中的值，而不是< datalist>元素。
Add theonchangeattributes to the<input>tags, not the<datalist>tags.
You also need to read the value from the<input>elements, not the<datalist>elements.
Start:
<input id="startText" type="text" list="start" onchange="updateNavigationLink()">
<datalist id="start">
...
</datalist>
End:
<input id="endText" type="text" list="end" onchange="updateNavigationLink()">
<datalist id="end">
...
</datalist>
function updateNavigationLink() {
var link = "https://maps.google.com/maps?saddr="
+ encodeURIComponent(document.getElementById("startText").value)
+ "&daddr=" + encodeURIComponent(document.getElementById("endText").value);
document.getElementById("navigationLink").textContent = link;
} 演示 [ ^ ]
注意： textContent 将设置元素的文本;将删除任何HTML标记。如果您想要一个有用的链接，请使用 innerHTML 来向该元素添加< a> 标记。
Demo[^]
NB: textContent will set the text of the element; any HTML tags will be removed. If you want a working link, use innerHTML to add an <a> tag to the element instead.
function updateNavigationLink() {
var link = "https://maps.google.com/maps?saddr="
+ encodeURIComponent(document.getElementById("startText").value)
+ "&daddr=" + encodeURIComponent(document.getElementById("endText").value);
document.getElementById("navigationLink").innerHTML = "<a href='" + link + "' target='_blank'>View map</a>";
}
这篇关于为什么链接不会生成< span id =" navigationlink">< / span>指示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
