Почему ссылка не генерирует, где </span> указывает - PullRequest
Новая
       19

Почему ссылка не генерирует, где </span> указывает

0 голосов
/ 02 июня 2018

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

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

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

Очень простой способ сделать это с минимальными изменениями в вашем коде будет:

  1. Дайте обмен на ваш ввод
  2. Дайте начальный и конечный идентификаторы для вашего ввода

Просто измените свои блоки ввода на этот 

<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;
0 голосов
/ 02 июня 2018

Изменить onchange размещение события datalist на input, затем создать a Элемент, затем добавить в span. 

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