Как передать значения из input в Яндекс карту?

Question

[elena81kachanova]

Доброго времени суток.

Есть яндекс карта с построением маршрута.
Есть два внешних поля input и кнопка "Построить маршрут".
Нужно, чтобы при нажатии на кнопку, из input-ов значения попадали в route и строился маршрут на карте.
При клике ничего не происходит, подскажите пожалуйста, в чем может быть ошибка.

<script type="text/javascript">
 
        ymaps.ready(init);
 
        let myMap;
        let suggestViewFrom, suggestViewTo;
        let from, to;
 
        function init() {
 
            //Всплывающая подсказка
            suggestViewFrom = new ymaps.SuggestView('from');
            suggestViewTo = new ymaps.SuggestView('to');
 
            myMap = new ymaps.Map("map", {
                center: [55.755814, 37.617635],
                zoom: 8,
            });
 
            //Маршрут
            ymaps.route([from, to])
                .then(function (route) {
                    // Добавляем маршрут на карту.
                    myMap.geoObjects.add(route);
                },
                function (error) {
                    alert('Возникла ошибка: ' + error.message);
                });
        }
 
    </script>

<div id="app">
    <div><input type="text" id="from"></div>
    <div><input type="text" id="to"></div>
    <div><input type="submit" id="run" value="ПОСТРОИТЬ МАРШРУТ"></div>
    <div

<script type="text/javascript">
    document.getElementById('run').addEventListener('click', function () {
        from = document.getElementById('from').value;
        to = document.getElementById('to').value;
    });
 
</script>

Answer 1

[Александр Черемхин]

Вызывайте построитель маршрута после
1) готовности ymaps (внутри функции init)
2) в обработчике нажатия кнопки "ПОСТРОИТЬ МАРШРУТ"

ymaps.ready(init);
 
let myMap;
let suggestViewFrom, suggestViewTo;

 
function init() {
 
           myMap = new ymaps.Map("map", {
                center: [55.755814, 37.617635],
                zoom: 8,
            });

           //Всплывающая подсказка
             suggestViewFrom = new ymaps.SuggestView('from');
             suggestViewTo = new ymaps.SuggestView('to');
 
          document.getElementById('run').addEventListener('click', function () {
               const from = document.getElementById('from').value;
               const to = document.getElementById('to').value;
               
          
             //Маршрут
             ymaps.route([from, to])
                .then(function (route) {
                    // Добавляем маршрут на карту.
                    myMap.geoObjects.add(route);
                },
                function (error) {
                    alert('Возникла ошибка: ' + error.message);
               });
         });
}

Comments

[Александр Черемхин]

Тип submit здесь не нужен

<div><input type="submit" id="run" value="ПОСТРОИТЬ МАРШРУТ"></div>

лучше так

<div><button id="run">ПОСТРОИТЬ МАРШРУТM</button></div>