Здравствуйте, хотел сделать мультиязычный сайт, написал такой код
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- и их переводом на другой язык.
