使用javascript翻译网页

Question

我试着用js来翻译我的网页，但是我的代码在这里不能工作。

<div class="navLan">
    <a href="" id="menu-item_en" onclick="change_language(this.id)">EN</a>
    <!-- <hr> -->
    <a href="" id="menu-item_ru" onclick="change_language(this.id)">RU</a>
    <!-- <hr> -->
    <a href="" id="menu-item_uz" onclick="change_language(this.id)">UZ</a>
</div>

其中用户选择语言，我使用key为元素赋予属性，如下所示

<div class="listGroup">
    <a href="#row3" class="hvr-grow nav-link lang" key='about'>About</a>
    <a href="#row4" class="nav-link lang" key="courses">Courses</a>
    <a href="#row5" class="nav-link lang" key='reg'>Registration</a>
    <a href="#row6" class="nav-link lang" key='news'>News</a>
    <a href="#row7" class="nav-link lang" key='feedback'>Feedback</a>
    <a href="#row8" class="nav-link lang" key='contact'>Contacts</a>
    <div class="hr"></div>
</div>

在脚本标记中的代码末尾，我给出了这样的翻译

var arrLang = {
    'menu-item_en': {
        'about':'About',
        'courses':'Courses',
        'reg':'Registration',
        'news':'News',
        'feedback':'Feedback',
        'contact':'Contacts'
       },
    'menu-item_ru': {
        'about':'About',
        'courses':'Courses',
        'reg':'Registration',
        'news':'News',
        'feedback':'Feedback',
        'contact':'Contacts'
      },
    'menu-item_uz': {
        'about':'Biz Haqimizda',
        'courses':'Kurslar',
        'reg':'Ro\'yxatdan o\'tmoq',
        'news':'Yangiliklar',
        'feedback':'Fikr-Mulohaza',
        'contact':'Aloqa'
      }
   }

最后我的js文件在这里

function change_language(id) {
  var lang = id;
  document.cookie = "lang=" + lang + ";";

  var elementss = document.getElementsByClassName('lang');
  var placeholders = document.getElementsByClassName('placeholders');

  if (document.cookie.split(';').filter(function (item) {
    return item.indexOf('lang=menu-item_en') >= 0
  }).length) {
    for (let i = 0; i < elementss.length; i++) {
        elementss[i].innerHTML = arrLang['menu-item_en'][elementss[i].getAttribute('key')];
    }
    for (let g = 0; g < placeholders.length; g++){
        placeholders[g].setAttribute('placeholder', arrLang['menu-item_en'][placeholders[g].getAttribute('key')]);
    }
  } else if (document.cookie.split(';').filter(function (item) {
    return item.indexOf('lang=menu-item_uz') >= 0
}).length) {
    for (let i = 0; i < elementss.length; i++) {
        elementss[i].innerHTML = arrLang['menu-item_uz'][elementss[i].getAttribute('key')];
    }
    for (let g = 0; g < placeholders.length; g++){
        placeholders[g].setAttribute('placeholder', arrLang['menu-item_uz'][placeholders[g].getAttribute('key')]);
    }
  } else {
    for (let i = 0; i < elementss.length; i++) {
        elementss[i].innerHTML = arrLang['menu-item_ru'][elementss[i].getAttribute('key')];
    }
    for (let g = 0; g < placeholders.length; g++){
        placeholders[g].setAttribute('placeholder', arrLang['menu-item_ru'][placeholders[g].getAttribute('key')]);
    }
  }
};

(function () {
    var elementss = document.getElementsByClassName('lang');
    var placeholders = document.getElementsByClassName('placeholders');
    var inputs = document.getElementsByClassName('inputs');

  if (document.cookie.split(';').filter(function (item) {
    return item.indexOf('lang=menu-item_en') >= 0
  }).length) {
    for (let i = 0; i < elementss.length; i++) {
        elementss[i].innerHTML = arrLang['menu-item_en'][elementss[i].getAttribute('key')];
    }
    for (let g = 0; g < placeholders.length; g++){
        placeholders[g].setAttribute('placeholder', arrLang['menu-item_en'][placeholders[g].getAttribute('key')]);
    } 
    for (let j = 0; j < inputs.length; j++){
        inputs[j].setAttribute('value', arrLang['menu-item_en'][inputs[j].getAttribute('key')]);
    } 
  } else if (document.cookie.split(';').filter(function (item) {
    return item.indexOf('lang=menu-item_uz') >= 0
  }).length) {
    for (let i = 0; i < elementss.length; i++) {
        elementss[i].innerHTML = arrLang['menu-item_uz'][elementss[i].getAttribute('key')];
    }
    for (let g = 0; g < placeholders.length; g++){
        placeholders[g].setAttribute('placeholder', arrLang['menu-item_uz'][placeholders[g].getAttribute('key')]);
    }
    for (let j = 0; j < inputs.length; j++){
        inputs[j].setAttribute('value', arrLang['menu-item_uz'][inputs[j].getAttribute('key')]);
    } 
  } else {
    for (let i = 0; i < elementss.length; i++) {
        elementss[i].innerHTML = arrLang['menu-item_ru'][elementss[i].getAttribute('key')];
    }
    for (let g = 0; g < placeholders.length; g++){
        placeholders[g].setAttribute('placeholder', arrLang['menu-item_ru'][placeholders[g].getAttribute('key')]);
    }
    for (let j = 0; j < inputs.length; j++){
        inputs[j].setAttribute('value', arrLang['menu-item_ru'][inputs[j].getAttribute('key')]);
    } 
  }
})();

有谁能纠正我吗？

Answer 1

很可能在呈现HTML时，您可能没有change_language函数，所以onclick="change_language(this.id)"将任何东西绑定到onclick。让我们尝试使用javascript添加addEventListener。

下面是一个有效的示例：https://jsfiddle.net/jugrae2z/