Не получается переписать код jquery под vanilla js

@vsdfkj · Регистрация: 19.07.2022

Студворк — интернет-сервис помощи студентам

Столкнулся с проблемой при подключении апи яндекс код из их песочницы предоставляется на jquery я хочу переписать его на ванильный js код выглядит так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
function init() {
 
    var suggestView = new ymaps.SuggestView('suggest'),
        map,
        placemark;
 
    $('#button').bind('click', function (e) {
        geocode();
    });
 
    function geocode() {
        
        var request = $('#suggest').val();
      
        ymaps.geocode(request).then(function (res) {
            var obj = res.geoObjects.get(0),
                error, hint;
 
            if (obj) {
          
                switch (obj.properties.get('metaDataProperty.GeocoderMetaData.precision')) {
                    case 'exact':
                        break;
                    case 'number':
                    case 'near':
                    case 'range':
                        error = 'Неточный адрес, требуется уточнение';
                        hint = 'Уточните номер дома';
                        break;
                    case 'street':
                        error = 'Неполный адрес, требуется уточнение';
                        hint = 'Уточните номер дома';
                        break;
                    case 'other':
                    default:
                        error = 'Неточный адрес, требуется уточнение';
                        hint = 'Уточните адрес';
                }
            } else {
                error = 'Адрес не найден';
                hint = 'Уточните адрес';
            }
 
          
            if (error) {
                showError(error);
                showMessage(hint);
            } else {
                showResult(obj);
            }
        }, function (e) {
            console.log(e)
        })
 
    }
    function showResult(obj) {
     
        $('#suggest').removeClass('input_error');
        $('#notice').css('display', 'none');
 
        var mapContainer = $('#map'),
            bounds = obj.properties.get('boundedBy'),
    
            mapState = ymaps.util.bounds.getCenterAndZoom(
                bounds,
                [mapContainer.width(), mapContainer.height()]
            ),
       
            address = [obj.getCountry(), obj.getAddressLine()].join(', '),
       
            shortAddress = [obj.getThoroughfare(), obj.getPremiseNumber(), obj.getPremise()].join(' ');
       
        mapState.controls = [];
        
        createMap(mapState, shortAddress);
      
        showMessage(address);
    }
 
    function showError(message) {
        $('#notice').text(message);
        $('#suggest').addClass('input_error');
        $('#notice').css('display', 'block');
     
        if (map) {
            map.destroy();
            map = null;
        }
    }
 
    function createMap(state, caption) {
      
        if (!map) {
            map = new ymaps.Map('map', state);
            placemark = new ymaps.Placemark(
                map.getCenter(), {
                    iconCaption: caption,
                    balloonContent: caption
                }, {
                    preset: 'islands#redDotIconWithCaption'
                });
            map.geoObjects.add(placemark);
        метки в соответствии с найденным адресом.
        } else {
            map.setCenter(state.center, state.zoom);
            placemark.geometry.setCoordinates(state.center);
            placemark.properties.set({iconCaption: caption, balloonContent: caption});
        }
    }
 
    function showMessage(message) {
        $('#messageHeader').text('Данные получены:');
        $('#message').text(message);
    }
}

я пытался менять методы jquery на методы js (селекторы добавление свойст и стилей) но по итогу функция работает не корректно вот что получилось у меня

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
const init = () => {
    const Geocode = () => {
      const request = document.querySelector("#suggest").textContent;
      const CreateMap = (state, caption) => {
        if (!map) {
          map = new ymaps.Map("map", state);
          placemark = new ymaps.Placemark(
            map.getCenter(),
            {
              iconCaption: caption,
              balloonContent: caption,
            },
            {
              preset: "islands#redDotIconWithCaption",
            }
          );
          map.geoObjects.add(placemark);
        } else {
          map.setCenter(state.center, state.zoom);
          placemark.geometry.setCoordinates(state.center);
          placemark.properties.set({
            iconCaption: caption,
            balloonContent: caption,
          });
        }
      };
 
      const showMessage = (message) => {
        document
          .querySelector("#messageHeader")
          .textContent("Данные получены:");
        document.querySelector("#message").textContent(message);
      };
      const ShowError = (message) => {
        document.querySelector("#notice").textContent(message);
        document.querySelector("#suggest").classList.add("input_error");
        document.querySelector("#notice").style.display("block");
 
        if (map) {
          map.destroy();
          map = null;
        }
      };
 
      const ShowResult = (obj) => {
        document.querySelector("#suggest").classList.remove("input_error");
        document.querySelector("#notice").style.display("none");
        let mapContainer = document.querySelector("#map"),
          bounds = obj.properties.get("boundedBy"),
          mapState = ymaps.util.bounds.getCenterAndZoom(bounds, [
            mapContainer.width(),
            mapContainer.height(),
          ]),
          address = [obj.getCountry(), obj.getAddressLine()].join(", "),
          shortAddress = [
            obj.getThoroughfare(),
            obj.getPremiseNumber(),
            obj.getPremise(),
          ].join(" ");
        mapState.controls = [];
        CreateMap(mapState, shortAddress);
        showMessage(address);
      };
 
      ymaps.geocode(request).then(function (res) {
        let obj = res.geoObjects.get(0),
          error,
          hint;
        if (obj) {
          switch (
            obj.properties.get("metaDataProperty.GeocoderMetaData.precision")
          ) {
            case "exact":
              break;
            case "number":
            case "near":
            case "range":
              error = "Неточный адрес, требуется уточнение";
              hint = "Уточните номер дома";
              break;
            case "street":
              error = "Неполный адрес, требуется уточнение";
              hint = "Уточните номер дома";
              break;
            case "other":
            default:
              error = "Неточный адрес, требуется уточнение";
              hint = "Уточните адрес";
          }
        } else {
          error = "Адрес не найден";
          hint = "Уточните адрес";
        }
        if (error) {
          ShowError(error);
          showMessage(hint);
        } else {
          ShowResult(obj);
        }
      });
    };
 
    document.querySelector("#button").addEventListener("click", function (e) {
      Geocode();
    });
    let suggestView = new ymaps.SuggestView("suggest"),
      map,
      placemark;
  };
 
  ymaps.ready(init);

@xkkx · 26.02.2023, 04:57

Вот хороший сайт, как выкинуть jquery и стать полноценным ~~нарк.~~Человек с большой буквы!

https://youmightnotneedjquery.com/#val

@POSE · 26.02.2023, 08:00

xkkx, спасибо за ссылку. Вижу, что у них всё по современному. У меня POST через AJAX сильно отличается. Надо будет по-разбираться в свободное время. А ты тоже уже начинаешь отказываться от jquery? Похвально

@xkkx · 26.02.2023, 09:48

Сообщение от POSE

У меня POST через AJAX сильно отличается.

Я давно использую fetch считая что ajax у jquery это бесполезная вещь в целом. По этому, в основном в проектах я использую slim версию весом 71кб (На целые 16 кб меньше!), которая решена ajax функций. Ведь важно экономить каждый КБ JS символов, иначе эти проклятые веб анализаторы скажут что сайт говно, и у меня будет не на что намазать красную икру

Сообщение от POSE

ты тоже уже начинаешь отказываться от jquery?

Ещё от swiper(140КБ) и много других вещей, которые можно в принципе легко и очень просто - реализовать стандартными средствами ванильного JS, мы должно сохранять чистоту и верность своего кода, не изменяя и не развращая непонятными сторонними расширениями, которые весят по более jquery а представляют гораздо меньше функционал тем тот же jquery ! А на странице используются буквально в пару местах, если не в одном! Расточительство !!!

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@xkkx 132 / 76 / 16 Регистрация: 08.07.2022 Сообщений: 309
	26.02.2023, 04:57
	Вот хороший сайт, как выкинуть jquery и стать полноценным ~~нарк.~~Человек с большой буквы! https://youmightnotneedjquery.com/#val 1

@POSE Заблокирован
	26.02.2023, 08:00
	xkkx, спасибо за ссылку. Вижу, что у них всё по современному. У меня POST через AJAX сильно отличается. Надо будет по-разбираться в свободное время. А ты тоже уже начинаешь отказываться от jquery? Похвально 0