Задать вопрос
@MrFox235
Начинающий веб-разработчик

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') как избавится от этой ошибки?

Здравствуйте, хотел сделать мультиязычный сайт, написал такой код
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title class="title-1">Тайтл</title>
    <link rel="stylesheet" href="/content/style.css">
</head>
<body>

    <select class="languages"> 
        <option value="ru" selected>ru</option>
        <option value="en">en</option>
        <option value="ua">ua</option>
    </select>

    <h2 class="lng-h2">Текст заголовка</h2>

    <p class="lng-p">Текст параграфа с цифрами 12345</p>

    <h3 class="lng-h3">Начало</h3>

    <script src="/content/lng.js"></script>
    <script src="/content/list.js"></script>
</body>
</html>

CSS
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 20px;
}

body {
    width: 100%;
    height: 100vh;
    background-color: blueviolet;
}

.languages {
    width: 200px;
    height: 50px;
    margin: 50px;
}

.lng-h2 {
    color: #fff;
    margin: 20px;
}

.lng-p {
    color: #fff;
    margin: 20px;
}

.lng-h3 {
    color: #fff;
    margin: 20px;
}

lng.js
const langArr = {
    "title-1" : {
        "ru" : "тайтл",
        "en" : "title",
        "ua" : "тайтл",
    },
    "h2" : {
        "ru" : "текст заголовка",
        "en" : "title text",
        "ua" : "текст заголовка",
    },
    "p" : {
        "ru" : "текст параграфа с цифрами 12345",
        "en" : "paragraph text with numbers 12345",
        "ua" : "текст параграфа з цифрами 12345",
    },
    "h3" : {
        "ru" : "Начало",
        "en" : "Start",
        "ua" : "Початок",
    },
}

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

select.addEventListener('change', changeURLLanguage);

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 + '#ru';
    location.reload();
  }
  select.value = hash;
  document.querySelector('.title-1').innerHTML = langArr['title-1'][hash];
  //document.querySelector('.lng-h2').innerHTML = langArr['h2'][hash];
  for (let key in langArr){
    document.querySelector('.lng-' + key).innerHTML = langArr[key][hash];
  }
}

changeLanguage();

Не могу понять почему пишет в консоле ошибку
"Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
at changeLanguage (list.js:24:53)
at list.js:28:1"
Подключил файлы в правильной последовательности, в начале /lng.js потом /list.js
for здесь отвечает за нахождение всех элементов с префексом .lng- и их переводом на другой язык.
  • Вопрос задан
  • 934 просмотра
Подписаться 1 Простой 8 комментариев
Решения вопроса 1
@Paul14
Ошибка "Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')" возникает, когда вы пытаетесь установить свойство innerHTML для элемента, который не существует в DOM-дереве. В вашем случае, вероятно, элемент, который вы пытаетесь найти с помощью метода querySelector, не существует на странице.

Проверьте, правильно ли вы написали классы элементов в HTML-коде и в файле lng.js. Убедитесь, что все элементы, на которые вы ссылаетесь в цикле for, существуют на странице.

Также, убедитесь, что вы вызываете функцию changeLanguage() после того, как все элементы загрузятся на странице. Вы можете использовать событие window.onload для этого:

window.onload = function() {
  changeLanguage();
};
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы