Как повторно изменить значение переменной из URl?

Question

[Axel030392]

Здравствуйте, не как не могу понять, как обновлять значение переменной, взятой с URl параметра.
Есть стракница фильтра по параметрам, один из которых город. Адресс страницы выглядит так .../?ajax_filter=true&sort-by=recent&location_location1=almetevsk&posted=all
Я беру параметр location_location1 и если он равен какомоту значению, в примере это "almetevsk", то в определенном спане появляется название города "Альметьевск" . С загрузкой скрипта все ок, но если выбрать другой город в фильтре, то в url страницы измениться этот параметр, но в спане не чего не меняется. Я закрепил к кнопки поиска, повторную функцию изменения спана по параметру, но он неменяется, и консоль лог также говорит что название не изменяется, и пишит что "Uncaught ReferenceError: eeer is not defined" - тоесть не определенна. Как заставить её меняться при нажатие кнопки, или просто делать какуюту фоновую проверку,

Вот такой код, пока что помогает только window.location.reload()

<script>
var queryString = window.location.search;

	var urlParams = new URLSearchParams(queryString);
	var location333 = urlParams.get('location_location1')
console.log(location333);
window.addEventListener('DOMContentLoaded', function eeer(){	
	
	if (location333 === 'arzamas' ) { 
	document.getElementById('locator_citi').innerHTML = 'Арзамас'}
	if (location333 === 'abakan' ) { 
	document.getElementById('locator_citi').innerHTML = 'Абакан'}
	if (location333 === 'almetevsk' ) { 
	document.getElementById('locator_citi').innerHTML = 'Альметьевск'}
	if (location333 === 'angarsk' ) { 
	document.getElementById('locator_citi').innerHTML = 'Ангарск'}
	if  (location333 === 'armavir' ) { 
	document.getElementById('locator_citi').innerHTML = 'Армавир'}
	if (location333 === 'artjom' ) { 
	document.getElementById('locator_citi').innerHTML = 'Артём'}
	if (location333 === 'arhangelsk' ) { 
	document.getElementById('locator_citi').innerHTML = 'Архангельск'}
	if (location333 === 'astrahan' ) { 
	document.getElementById('locator_citi').innerHTML = 'Астрахань'}
	if(location333 === 'achinsk' ) { 
	document.getElementById('locator_citi').innerHTML = 'Ачинск'}
	if (location333 === 'balakovo' ) { 
	document.getElementById('locator_citi').innerHTML = 'Балаково'}
	if (location333 === 'balashiha' ) { 
	document.getElementById('locator_citi').innerHTML = 'Балашиха'}
	if (location333 === 'barnaul' ) { 
	document.getElementById('locator_citi').innerHTML = 'Барнаул'}
	else if (location333 === 'batajsk' ) { 
	document.getElementById('locator_citi').innerHTML = 'Батайск'}

	}); 
	


	const menuLink = document.querySelector(".jobsearch-onsubmit-apilocs");
 menuLink.addEventListener("click", () => {
  setTimeout(() => {
	
    
	console.log(location333);  
    eeer();
  }, 10000);
});

	</script>

<span id="locator_citi"></span>

Ну и помогите оптимизировать конструкцию, через массив, так как не очень разбираюсь в нем

Answer 1

[Сергей delphinpro]

function update() {
    const urlParams = new URLSearchParams(window.location.search);
    const city = urlParams.get('location_location1');
    const target = document.getElementById('locator_citi');
    const cities = {
        'arzamas'   : 'Арзамас',
        'abakan'    : 'Абакан',
        'almetevsk' : 'Альметьевск',
        'angarsk'   : 'Ангарск',
        'armavir'   : 'Армавир',
        'artjom'    : 'Артём',
        'arhangelsk': 'Архангельск',
        'astrahan'  : 'Астрахань',
        // ...
    };

    if (cities[city]) {
        target.innerHTML = cities[city];
    }
}

window.addEventListener('DOMContentLoaded', update);

document.querySelector('.jobsearch-onsubmit-apilocs')?.addEventListener('click', () => {
    update();
});

Comments

[Axel030392]

Спасибо большое за оптимизацию, но update так и не работает. Тоесть там была еще проблема в том, что параметр в url меняется в течение 5-8 секунд. Поэтому я предположительно ставил отсрочку для проверки, но врядли это было верно. Как тут быть?

С отсрочкой через setTimeout на 8сек, всё работает)

И при повторной смене, уже не работает, тоесть однаразово как то. Вот так:
Загрузилась страница на городе (город показан) поменял город (прогрузилось через 8 секунд с отсрочкой, город изменен) далее меняю город еще раз, и все, больше не меняет

[Сергей delphinpro]

Axel030392, нужно встраиваться в ту систему, которая меняет город. По событию менять надпись в спане. А не колхозить на таймаутах.
Если там делается запрос, то на вашем интернете запрос выполнится за 8 сек, у другого - за 15. Какую отсрочку ставить?

[Сергей delphinpro]

Axel030392, как вариант (тоже колхозный), можно слушать history.onpushstate

[Axel030392]

Сергей delphinpro, а если колхозный setInterval, тут вроде он заработал, так как делает бесконечный интервал. Встраиваться пробывал через php, но там хз еще сложнее и нерабочее. Плюс боюсь поломать исходных код, А этот только для SEO делается, чтоб боты по адрессу страницы с параметрами города, видели город и кушали это в индекс. А так больше это не для чего не нужно)

[Сергей delphinpro]

Axel030392,

для SEO делается

выглядит как удаление зуба через задницу, извините =))

Answer 2

[iljaGolubev]

почините бардак в коде чтобы не было "Uncaught ReferenceError: eeer is not defined" - и всё заработает.

const eeer = ()=>{
    // if (location333 === 'arzamas' ) { ...
}
window.addEventListener('DOMContentLoaded', eeer);