Member 13855652 Ответов: 1

Почему не генерировать ссылку где &ЛТ;Спан ИД="navigationlink"&ГТ;&ЛТ;/службы&ГТ; показывает

Я уже довольно давно пытаюсь получить результат этого кода, но он просто не работает. Я хочу, чтобы ссылка была сгенерирована ниже, но когда я просматриваю сценарий, ссылка, кажется, не появляется. Я действительно не знаю, как или какие части сценария ошибочны, и был бы особенно признателен за любую помощь в этом вопросе:

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


Что я уже пробовал:

Я перепробовал множество вещей, кто-то на этой платформе недавно помог мне с некоторыми из вышеперечисленных, но с тех пор, как было введено новое дополнение, скрипт больше не работает так, как раньше, очевидно, у меня все еще есть скрипт, но мне нужна помощь для поиска проблемы со скриптом выше.

1 Ответов

Рейтинг:
1

Richard Deeming

Добавить onchange атрибуты к <input> бирки, а не то <datalist> теги.

Вам также необходимо прочитать значение из <input> элементы, а не то, что <datalist> элементы.

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; 
}
Демонстрация[^]

NB: textContent будет установлен текст элемента; все HTML-теги будут удалены. Если вам нужна рабочая ссылка, используйте innerHTML чтобы добавить <a> вместо этого пометьте элемент тегом.
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>"; 
}
Демонстрация[^]