Не могу понять в чем ошибка в коде JS?

Question

[Vlad_samosuev]

прошу помочь найти ошибку в коде:

const select = document.querySelector('select');
const allLang = ['en', 'ru'];

select.addEventListener('change', changeURLLanguage);

// перенаправить на url с указанием языка
function changeURLLanguage() {
let lang = select.value;
location.href = window.location.pathname + '#' + lang;
location.reload();
}

function changeLanguage() {
let hash = window.location.hash;
hash = hash.substr(1);
console.log(hash);
if (!allLang.includes(hash)) {
location.href = window.location.pathname + '#en';
location.reload();
}
select.value = hash;
document.querySelector('title').innerHTML = langArr[hash];
// document.querySelector('.lng-chip').innerHTML = langArr['chip'][hash];
for (let key in langArr) {
let elem = document.querySelector('.lng-' + key);
if (elem) {
elem.innerHTML = langArr[key][hash];
}

}
}

changeLanguage();

вот что пишет google в консоле:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at app.js:4:8

Answer 1

[Gimir]

Очевидно квери селектор не нашел твой элемент и вернул null, если загружаешь скрипт в хеде, сделай обертку window.addEventListener('load', () => { .... })
Чтобы вешать события только после того как дом готов

Comments

[Vlad_samosuev]

не особо понел что именно нужно оборачивать

[Gimir]

весь код сверху

[Vlad_samosuev]

я все равно не понел, какой код сверху, если не составит труда прошу показать что нужно сделать на самом коде в вопросе!!! : )

[Vlad_samosuev]

Gimir, посмотри коммент

[Gimir]

Vlad_samosuev,

window.addEventListener('load', () => {

const select = document.querySelector('select');
const allLang = ['en', 'ru'];

select.addEventListener('change', changeURLLanguage);

// перенаправить на url с указанием языка
function changeURLLanguage() {
let lang = select.value;
location.href = window.location.pathname + '#' + lang;
location.reload();
}

function changeLanguage() {
let hash = window.location.hash;
hash = hash.substr(1);
console.log(hash);
if (!allLang.includes(hash)) {
location.href = window.location.pathname + '#en';
location.reload();
}
select.value = hash;
document.querySelector('title').innerHTML = langArr[hash];
// document.querySelector('.lng-chip').innerHTML = langArr['chip'][hash];
for (let key in langArr) {
let elem = document.querySelector('.lng-' + key);
if (elem) {
elem.innerHTML = langArr[key][hash];
}

}
}

changeLanguage();

});

[Vlad_samosuev]

Спасибо большое, я просто новичок ты мне очень помог!!!

[Gimir]

Vlad_samosuev, не за что. Если проблема решена отметь решением.