Javascript 如何在不刷新页面的情况下触发更改语言事件？

我已经创建了这个代码。它可以工作，但如果不刷新页面，事件侦听器将无法工作

这个案例发生在我点击刷新页面的时候

<h1 class="text-center" id="hi">hello i `m english </h1>

你好，我是英国人 javascript

    var navbarLang = document.querySelector('#navbar-cms .nav-container');

// create language button 
// arabic
var creatbtnAr = document.createElement("a");
creatbtnAr.innerHTML = "AR";
creatbtnAr.classList.add("buttonAr");
creatbtnAr.href = "#ar";
creatbtnAr.setAttribute("data-reload",'');
navbarLang.appendChild(creatbtnAr);

// english
var creatbtnEr = document.createElement("a");
creatbtnEr.innerHTML = "En";
creatbtnEr.classList.add("buttonEr");
creatbtnEr.href = "#en";
creatbtnEr.setAttribute("data-reload",'');
navbarLang.appendChild(creatbtnEr);


// define language reload anchors 
var dataReload = document.querySelectorAll("[data-reload]");
// define tags need to change language 
var sec1 = document.querySelector('#hi');
// language translats 
var language = {
    en:{
      welcome : "hhhhhhhhhhhhh"

    },
    ar:{
      welcome : "نعم نعم نعم نعم"
    }
 }
    // define language via window hash 
      if(window.location.hash){
        if(window.location.hash === "#ar" ){
          sec1.textContent = language.ar.welcome;
        }
      }

    // define language reload onclick 
    for (i = 0; i<= dataReload.length; i++){
      dataReload[i].EventTarget.addEventListener("click", function(){
        location.reload(true);
//          Event.preventDefault;
      });
    }

var navbarLang=document.querySelector（“#navbar cms.nav container”）；
//创建语言按钮
//阿拉伯文
var createbtnar=document.createElement（“a”）；
createbtnar.innerHTML=“AR”；
createbtnar.classList.add（“buttonAr”）；
createbtnar.href=“#ar”；
createbtnar.setAttribute（“数据重新加载”，”；
navbarLang.appendChild（createbtnar）；
//英式
var createbtner=document.createElement（“a”）；
createbtner.innerHTML=“En”；
createbtner.classList.add（“buttonEr”）；
createbtner.href=“#en”；
setAttribute（“数据重新加载”，”）；
navbarLang.appendChild（CreateBtner）；
//定义语言重新加载锚
var dataReload=document.queryselectoral（“[dataReload]”）；
//定义标签需要更改语言
var sec1=document.querySelector（'#hi'）；
//语言翻译
变量语言={
嗯:{
欢迎：“啊啊啊啊啊啊啊啊啊啊啊”
},
ar:{
欢迎您：“欢迎光临”
}
}
//通过窗口散列定义语言
if（window.location.hash）{
if（window.location.hash==“#ar”）{
sec1.textContent=language.ar.welcome；
}
}
//定义语言重载onclick
对于（i=0；i一种不刷新的可能方法是使用事件：


var navbarLang=document.querySelector（“#navbar cms.nav container”）；
//创建语言按钮
//阿拉伯文
var createbtnar=document.createElement（“a”）；
createbtnar.innerHTML=“AR”；
createbtnar.classList.add（“buttonAr”）；
createbtnar.href=“#ar”；
createbtnar.setAttribute（“数据重新加载”，”；
creatbtnAr.addEventListener（'单击'，事件=>{
翻译（'ar'）；
});
navbarLang.appendChild（createbtnar）；
//英式
var createbtner=document.createElement（“a”）；
createbtner.innerHTML=“En”；
createbtner.classList.add（“buttonEr”）；
createbtner.href=“#en”；
setAttribute（“数据重新加载”，”）；
createbtner.addEventListener（'click'，event=>{
翻译（‘en’）；
});
navbarLang.appendChild（CreateBtner）；
函数翻译（语言）{
如果（语言=='en'）{
document.getElementById（'hi'）.textContent='hhhhhhhhhhhhh'；
}
如果（语言=='ar'）{
document.getElementById（'hi'）.textContent='；
}
}
#导航栏cms.nav容器{
位置：相对位置；
}
#导航栏按钮{
位置：绝对位置；
顶部：4px；
左：100px；
背景：#333；
z指数：9999；
颜色：#fff；
填充：10px 20px；
边界半径：5px；
光标：指针；
}
#导航栏cms.按钮器{
位置：绝对位置；
顶部：4px；
左：140像素；
背景：#333；
z指数：9999；
颜色：#fff；
填充：10px 20px；
边界半径：5px；
光标：指针；
}







您好我是英语
您的示例不可处理您认为它有什么问题您使用的是
位置。重新加载（true）
哪个…重新加载页面。如果您不想刷新页面，请不要运行该代码。