Quiero cambiar el sitio web que estoy construyendo de inglés a español. Encontré un video de YouTube que explica cómo hacerlo, pero solo cambia el idioma del sitio web cuando hago clic en el ícono de actualización, no cuando hago clic en el enlace. Quiero que cambie cuando haga clic en el enlace. El video de youtube es este [1]: https://www.youtube.com/watch?v=PaJrDAmrOB4 . El HTML y JavaScript están a continuación. Gracias
HTML
<nav> <ul> <li><a href="#eng" data-reload>English</a></li> <li><a href="#es" data-reload>Spanish</a></li> </ul> </nav> <p id="title"> budget website </p>javascript
var dataReload = document.querySelectorAll("[data-reload]"); var language = { eng: { budgetWebsite: 'budget website' }, es: { budgetWebsite: 'Sitio web de presupuesto' } }; if(window.location.hash) { if(window.location.hash === "#es") { title.textContent = language.es.budgetWebsite; } } for (i = 0; i <= dataReload.length; i++) { dataReload[i].onClick = function() { location.reload(true); }; }He echado un vistazo a tu problema y al video de youtube. Y se me ocurrió un enfoque ligeramente diferente. Agregué el atributo de idioma de cambio de datos al elemento ancla y les di el valor para el idioma correspondiente.
<nav> <ul> <li><a href="" data-change-language="en">English</a></li> <li><a href="" data-change-language="es">Spanish</a></li> </ul> </nav> <p id="title"> budget website </p>El JavaScript a continuación establece el idioma predeterminado en "en". Cuando la página se haya cargado, verá si el idioma se ha cambiado antes y lo configurará en consecuencia. Luego adjuntará un detector de eventos a los elementos de anclaje. Entonces, cada vez que alguien hace clic en uno de los elementos de anclaje, se llama a la función de cambio de idioma y el idioma se guarda en el almacenamiento local, por lo que si vuelve a cargar la página o vuelve a abrirla, el idioma aún está configurado correctamente. La función changeLanguage itera sobre todas las claves en el objeto de idiomas y selecciona los elementos en su página y cambia su contenido.
let currentLanguage = "en"; let languages = { en: { title: "budget website" }, es: { title: "Sitio web de presupuesto" } } document.addEventListener("DOMContentLoaded", () => { let storedLanguage = localStorage.getItem("language"); if (storedLanguage) { changeLanguage(storedLanguage) } else { changeLanguage(currentLanguage) } [...document.querySelectorAll("[data-change-language]")].forEach((element) => { element.addEventListener("click", (event) => { event.preventDefault(); let language = element.getAttribute("data-change-language"); localStorage.setItem("language", language); changeLanguage(language); }) }); }); function changeLanguage(language) { let languageSet = languages[language]; Object.keys(languageSet).forEach((id) => { document.getElementById(id).innerText = languageSet[id]; }); }