Не работают скрипты перевода, что делать?
Всем привет, у меня имеется код HTML в котором есть ссылки в футере для смены языков, так же JSON и JS файлы которые это контролируют, но выдаёт ошибку помогите
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Project</title> <link rel="stylesheet" href="src/css/global.css"> </head> <body id="page-top" onload="translate('en','lng-tag')"> <div id="layout"> <header> <h1 id="heading" lng-tag="heading"> The project uses: </br> HTML, CSS and JS </h1> </header> <main> <div id="primaryBlock"> <div id="secondaryBlock"> <div id="descriptionBlock"> <h2 id="descriptionTitle"> Description: </h2> <p id="descriptionText" lng-tag="description"></p> </div> <div id="progressBlock"> <h2 id="progressTitle"> Progress: </h2> <p id="progressText"></p> <ul id="progressList"> <li id="git"></li> </ul> </div> </div> <div id="information"> <div id="aboutMe"> <h2 id="aboutMeTitle"> Project: </h2> <p id="userName"></p> <p id="repo"></p> </div> <div id="social"> <h2 id="socialTitle"> Social: </h2> <ul id="socialList"> <li id="email"></li> <li id="gitHub"></li> </ul> </div> </div> </div> </main> <footer> <p>Thanks for visiting my project page</p> <li class="nav-item" style="list-style-type: none; margin-left: 20px;"> <a class="nav-link js-scroll-trigger lng" id="enTranslator" href="javascript:void(0);">En</a> <a class="nav-link js-scroll-trigger lng" id="ruTranslator" href="javascript:void(0);" style="margin-left: 10px;">Ru</a> </li> </footer> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="src/scripts/translate.js"></script> <script type="module" src="src/scripts/index.js"></script> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Project</title> <link rel="stylesheet" href="src/css/global.css"> </head> <body id="page-top" onload="translate('en','lng-tag')"> <div id="layout"> <header> <h1 id="heading" lng-tag="heading"> The project uses: </br> HTML, CSS and JS </h1> </header> <main> <div id="primaryBlock"> <div id="secondaryBlock"> <div id="descriptionBlock"> <h2 id="descriptionTitle"> Description: </h2> <p id="descriptionText" lng-tag="description"></p> </div> <div id="progressBlock"> <h2 id="progressTitle"> Progress: </h2> <p id="progressText"></p> <ul id="progressList"> <li id="git"></li> </ul> </div> </div> <div id="information"> <div id="aboutMe"> <h2 id="aboutMeTitle"> Project: </h2> <p id="userName"></p> <p id="repo"></p> </div> <div id="social"> <h2 id="socialTitle"> Social: </h2> <ul id="socialList"> <li id="email"></li> <li id="gitHub"></li> </ul> </div> </div> </div> </main> <footer> <p>Thanks for visiting my project page</p> <li class="nav-item" style="list-style-type: none; margin-left: 20px;"> <a class="nav-link js-scroll-trigger lng" id="enTranslator" href="javascript:void(0);">En</a> <a class="nav-link js-scroll-trigger lng" id="ruTranslator" href="javascript:void(0);" style="margin-left: 10px;">Ru</a> </li> </footer> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="src/scripts/translate.js"></script> <script type="module" src="src/scripts/index.js"></script> </body> </html>
index.js:
import config from "../../config.json" assert {type: "json"}; import lang_en from "../../lng/en.json" assert {type: "json"}; import lang_ru from "../../lng/ru.json" assert {type: "json"}; // Description: document.getElementById("descriptionText").innerHTML = lang_en.description; // Progress: document.getElementById("progressText").textContent = lang_en.progress; document.getElementById("git").textContent = "Git — .git" // Project: document.getElementById("userName").textContent = `Creator: ${config.userName}`; document.getElementById("repo").innerHTML = `Repository: <a href="${config.repoLink}">here</a>`; // Social: document.getElementById("email").textContent = `Email — ${config.social.email}`; document.getElementById("gitHub").innerHTML = `My GitHub profile: <a href="${config.social.gitHub}">here</a>` function translate(lng, tagAttr){ var translate = new Translate(); translate.init(tagAttr, lng); translate.process(); if(lng == 'en'){ $("#enTranslator"); $("#ruTranslator"); } if(lng == 'ru'){ $("#ruTranslator"); $("#enTranslator"); } } $(document).ready(function(){ $("#enTranslator").click(function(){ translate('en', 'lng-tag'); }); $("#ruTranslator").click(function(){ translate('ru', 'lng-tag'); }); }); |
import config from "../../config.json" assert {type: "json"}; import lang_en from "../../lng/en.json" assert {type: "json"}; import lang_ru from "../../lng/ru.json" assert {type: "json"}; // Description: document.getElementById("descriptionText").innerHTML = lang_en.description; // Progress: document.getElementById("progressText").textContent = lang_en.progress; document.getElementById("git").textContent = "Git — .git" // Project: document.getElementById("userName").textContent = `Creator: ${config.userName}`; document.getElementById("repo").innerHTML = `Repository: <a href="${config.repoLink}">here</a>`; // Social: document.getElementById("email").textContent = `Email — ${config.social.email}`; document.getElementById("gitHub").innerHTML = `My GitHub profile: <a href="${config.social.gitHub}">here</a>` function translate(lng, tagAttr){ var translate = new Translate(); translate.init(tagAttr, lng); translate.process(); if(lng == 'en'){ $("#enTranslator"); $("#ruTranslator"); } if(lng == 'ru'){ $("#ruTranslator"); $("#enTranslator"); } } $(document).ready(function(){ $("#enTranslator").click(function(){ translate('en', 'lng-tag'); }); $("#ruTranslator").click(function(){ translate('ru', 'lng-tag'); }); });
translate.js:
function Translate() { this.init = function(attribute, lng){ this.attribute = attribute; this.lng = lng; } this.process = function() { _self = this; var xrhFile = new XMLHttpRequest(); xrhFile.open("GET", "../lng"+this.lng+".json", false); xrhFile.onreadystatechange = function () { if(xrhFile.readyState === 4) { if(xrhFile.status === 200 || xrhFile.status == 0) { var LngObject = JSON.parse(xrhFile.responseText); var allDom = document.getElementsByTagName("*"); for(var i =0; i < allDom.length; i++){ var elem = allDom[i]; var key = elem.getAttribute(_self.attribute); if(key != null) { elem.innerHTML = LngObject[key] ; } } } } } xrhFile.send(); } } |
function Translate() { this.init = function(attribute, lng){ this.attribute = attribute; this.lng = lng; } this.process = function() { _self = this; var xrhFile = new XMLHttpRequest(); xrhFile.open("GET", "../lng"+this.lng+".json", false); xrhFile.onreadystatechange = function () { if(xrhFile.readyState === 4) { if(xrhFile.status === 200 || xrhFile.status == 0) { var LngObject = JSON.parse(xrhFile.responseText); var allDom = document.getElementsByTagName("*"); for(var i =0; i < allDom.length; i++){ var elem = allDom[i]; var key = elem.getAttribute(_self.attribute); if(key != null) { elem.innerHTML = LngObject[key] ; } } } } } xrhFile.send(); } }
en.json:
{ "description": "Hello everyone, I already wrote in the description that this is a mini project in which I am learning <span>JS</span>, <span>TS</span> and various frameworks for <span>JS</span>, improving my skills in <span>HTML</span>, <span>SASS</span>, <span>CSS</span>, etc.", "progress": "At this point I will write what new things I have learned so far." } |
{ "description": "Hello everyone, I already wrote in the description that this is a mini project in which I am learning <span>JS</span>, <span>TS</span> and various frameworks for <span>JS</span>, improving my skills in <span>HTML</span>, <span>SASS</span>, <span>CSS</span>, etc.", "progress": "At this point I will write what new things I have learned so far." }
ru.json:
{ "description": "Всем привет, я уже писал в описании, что это мини проект, в котором я изучаю <span>JS</span>, <span>TS</span> и различные фреймворки для <span>JS</span>, совершенствую свои навыки работы с <span>HTML</span>, <span>SASS</span>, <span>CSS</span> и т.д.", "progress": "На этом этапе я напишу, что нового я узучил" } |
{ "description": "Всем привет, я уже писал в описании, что это мини проект, в котором я изучаю <span>JS</span>, <span>TS</span> и различные фреймворки для <span>JS</span>, совершенствую свои навыки работы с <span>HTML</span>, <span>SASS</span>, <span>CSS</span> и т.д.", "progress": "На этом этапе я напишу, что нового я узучил" }
Дополнительно:
Все ошибки исправил, теперь только не могу разобрать с тегами , выдаёт ошибку get
Иди учи вначале html(кривые пользовательские атрибуты), а затем js(вызов функций до их объявления)
- Можно уточнить, насчёт этого, какие именно атрибуты
- "lng-tag" https://developer.mozilla.org/ru/docs/Learn/HTML/H...
- Антон Шаманов, спасибо на указанные недостатки, поработал теперь работает как часы
- Антон Шаманов, Можете подсказать, насколько теперь этот код качественный?
Или лучше делать через функцию?class Translate { constructor(props) { this.attribute = props.attribute; this.lng = props.lng; } process() { const _self = this; const xrhFile = new XMLHttpRequest(); xrhFile.open("GET", `./src/scripts/translations/${this.lng}.json`, false); xrhFile.onreadystatechange = function () { if (xrhFile.readyState === 4) { if (xrhFile.status === 200 || xrhFile.status == 0) { const LngObject = JSON.parse(xrhFile.responseText); const allDom = document.getElementsByTagName("*"); for (let i = 0; i < allDom.length; i++) { const elem = allDom[i]; const key = elem.getAttribute(_self.attribute); if (key != null) { elem.innerHTML = LngObject[key]; } } } } }; xrhFile.send(); } } function loadNewLang(new_lang) { const translate = new Translate({ attribute: 'data-lang', lng: new_lang }); const currentLng = new_lang; translate.process(); } loadNewLang('en'); document.querySelector('.language-switcher').addEventListener('click', function (e) { e.preventDefault(); if (this.classList.contains('ru')) { this.classList.toggle('ru'); this.classList.toggle('en'); this.textContent = 'En'; loadNewLang('en'); } else if (this.classList.contains('en')) { this.classList.toggle('en'); this.classList.toggle('ru'); this.textContent = 'Ru'; loadNewLang('ru'); } }); export {};
class Translate { constructor(props) { this.attribute = props.attribute; this.lng = props.lng; } process() { const _self = this; const xrhFile = new XMLHttpRequest(); xrhFile.open("GET", `./src/scripts/translations/${this.lng}.json`, false); xrhFile.onreadystatechange = function () { if (xrhFile.readyState === 4) { if (xrhFile.status === 200 || xrhFile.status == 0) { const LngObject = JSON.parse(xrhFile.responseText); const allDom = document.getElementsByTagName("*"); for (let i = 0; i < allDom.length; i++) { const elem = allDom[i]; const key = elem.getAttribute(_self.attribute); if (key != null) { elem.innerHTML = LngObject[key]; } } } } }; xrhFile.send(); } } function loadNewLang(new_lang) { const translate = new Translate({ attribute: 'data-lang', lng: new_lang }); const currentLng = new_lang; translate.process(); } loadNewLang('en'); document.querySelector('.language-switcher').addEventListener('click', function (e) { e.preventDefault(); if (this.classList.contains('ru')) { this.classList.toggle('ru'); this.classList.toggle('en'); this.textContent = 'En'; loadNewLang('en'); } else if (this.classList.contains('en')) { this.classList.toggle('en'); this.classList.toggle('ru'); this.textContent = 'Ru'; loadNewLang('ru'); } }); export {};
- Никита Москвитин, как минимум это не рабочий код - ты не можешь переопределять константы, на то они и константы
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы решить проблему с неработающими скриптами перевода на сайте, можно предпринять несколько шагов:
1. Проверьте настройки вашего браузера. Иногда блокировщики рекламы или расширения для защиты конфиденциальности могут блокировать работу скриптов перевода. Убедитесь, что эти расширения не блокируют нужный функционал.
2. Попробуйте очистить кэш и файлы cookie браузера. Иногда накопленные данные могут привести к конфликтам и проблемам с загрузкой скриптов. После очистки кэша и cookie перезапустите браузер и проверьте работу скриптов.
3. Обновите ваш браузер до последней версии. Иногда проблемы с загрузкой скриптов могут быть связаны с устаревшей версией браузера, которая не поддерживает определенные функции.
4. Проверьте настройки безопасности браузера. Убедитесь, что скрипты не блокируются из-за настроек безопасности. Может быть, стоит временно отключить блокировку скриптов или добавить сайт в список исключений.
Если после выполнения этих шагов проблема не решится, возможно, проблема лежит на стороне сервера сайта, и вам стоит обратиться к администратору сайта или службе поддержки для получения дополнительной помощи.
// Пример кода на PHP echo "Пример кода на PHP";