无法在单击按钮时基于本地存储更改文本语言

Question

我制作了按钮以根据 localStoragelanguage项目值在单击时切换数据语言，但它没有按预期工作

.HTML：

<a id="arbutton" href="#ar">arabic</a>
<a id="enbutton" href="#en">english</a>
<a id="" href="localStorage1.html">page</a>
<!--     data here will change -->
<div id="hello">yes language</div>

.JS：

var creatbtnAr = document.querySelector('#arbutton');
var creatbtnEn = document.querySelector('#enbutton');
// button language arabic
creatbtnAr.addEventListener('click', event => {
localStorage.setItem("language", "ar");
console.log(localStorage.language);
});
// button language english
creatbtnEn.addEventListener('click', event => {
localStorage.setItem("language", "en");
console.log(localStorage.language);
});
// methods 
var lg = localStorage.getItem.language;
function translate(lg) {
if(lg == 'ar') {
document.querySelector('#hello').textContent = 'u arabic';
}
if(lg == 'en') {
document.querySelector('#hello').textContent = 'u english';
}
}

https://codepen.io/pen/?editors=1111

Answer 1

试试这个：

var creatbtnAr = document.querySelector('#arbutton');
var creatbtnEn = document.querySelector('#enbutton');
// button language arabic
creatbtnAr.addEventListener('click', event => {
localStorage.setItem("language", "ar");
console.log(localStorage.language);
translate();
});
// button language english
creatbtnEn.addEventListener('click', event => {
localStorage.setItem("language", "en");
console.log(localStorage.language);
translate();
});
// methods 
function translate() {
const lg = localStorage.getItem("language");
if(lg == 'ar') {
document.querySelector('#hello').textContent = 'u arabic';
}
if(lg == 'en') {
document.querySelector('#hello').textContent = 'u english';
}
}