多语言应用程序不工作(javascript)

Question

我正在尝试用三种语言构建一个骰子游戏：英语、意大利语和德语。我用要翻译的单词制作了三个js文件，然后用querySelector和getElementById替换了三种不同语言中的单词。问题是：当我正确按下三个按钮中的一个时，语言开关就会一直卡住。例如，如果我按下"意大利语"按钮，语言将变为意大利语，但如果我按下英语或德语，则不会发生任何变化。我不知道怎么了，有人能帮我吗？感谢

//set date from moment.js
var mydate = new Date();
moment.locale('en');
mydate=moment().format('LL');
document.getElementById("date").innerHTML=mydate;
//create a new element
var langScript = document.createElement('script');
//declaration variables
var lang='winner!',player=['player 1','player 2'];
startGame();
var prefix1='<i class="ion-ios-plus-outline"></i>';
var prefix2='<i class="ion-ios-loop" ></i>';
var prefix3='<i class="ion-ios-download-outline" ></i>';
//when i click the language IT button, the language's variables were changed
document.querySelector('.btn-it').addEventListener('click',function ita(){
//window.location.reload();
moment.locale('it');
mydate=moment().format('LL');
document.getElementById("date").innerHTML=mydate;

langScript.src="./it.js";
document.head.appendChild(langScript);
langScript.addEventListener('load', function  () {
console.log('test');
document.getElementById("btn-new").innerHTML=prefix1+ui.textButtonNewGame;
document.getElementById("btn-roll").innerHTML=prefix2+ui.textButtonRollDice;
document.getElementById("btn-hold").innerHTML=prefix3+ui.textButtonHold;
document.getElementById("currentTXT-0").innerHTML=ui.textCurrentInBotton;
document.getElementById("currentTXT-1").innerHTML=ui.textCurrentInBotton;
document.getElementById("name-0").innerHTML=ui.namePlayer1;
document.getElementById("name-1").innerHTML=ui.namePlayer2;
document.getElementById("btn-en").innerHTML=ui.buttonChangeLanguageEnglish;
document.getElementById("btn-it").innerHTML=ui.buttonChangeLanguageItalian;
document.getElementById("btn-de").innerHTML=ui.buttonChangeLanguageGerman;
lang =ui.textWinner;
player[0]=ui.namePlayer1;
player[1]=ui.namePlayer2;


})  


})  
//when i click the language DE button, the language's variables were changed
document.querySelector('.btn-de').addEventListener('click',function ger(){
moment.locale('de');
mydate=moment().format('LL');
document.getElementById("date").innerHTML=mydate;

langScript.src="./de.js";
document.head.appendChild(langScript);

langScript.addEventListener('load', function() {
console.log('test');
document.getElementById("btn-new").innerHTML=prefix1+ui.textButtonNewGame;
document.getElementById("btn-roll").innerHTML=prefix2+ui.textButtonRollDice;
document.getElementById("btn-hold").innerHTML=prefix3+ui.textButtonHold;
document.getElementById("currentTXT-0").innerHTML=ui.textCurrentInBotton;
document.getElementById("currentTXT-1").innerHTML=ui.textCurrentInBotton;
document.getElementById("name-0").innerHTML=ui.namePlayer1;
document.getElementById("name-1").innerHTML=ui.namePlayer2;
document.getElementById("btn-en").innerHTML=ui.buttonChangeLanguageEnglish;
document.getElementById("btn-it").innerHTML=ui.buttonChangeLanguageItalian;
document.getElementById("btn-de").innerHTML=ui.buttonChangeLanguageGerman;
lang =ui.textWinner;
player[0]=ui.namePlayer1;
player[1]=ui.namePlayer2;


})
//window.location.reload();

})
//when i click the language EN button, the language's variables were changed
document.querySelector('.btn-en').addEventListener('click',function eng(){

langScript.src="./en.js";
document.head.appendChild(langScript);
langScript.addEventListener('load', function() {
console.log('test');
document.getElementById("btn-new").innerHTML=prefix1+ui.textButtonNewGame;
document.getElementById("btn-roll").innerHTML=prefix2+ui.textButtonRollDice;
document.getElementById("btn-hold").innerHTML=prefix3+ui.textButtonHold;
document.getElementById("currentTXT-0").innerHTML=ui.textCurrentInBotton;
document.getElementById("currentTXT-1").innerHTML=ui.textCurrentInBotton;
document.getElementById("name-0").innerHTML=ui.namePlayer1;
document.getElementById("name-1").innerHTML=ui.namePlayer2;
document.getElementById("btn-en").innerHTML=ui.buttonChangeLanguageEnglish;
document.getElementById("btn-it").innerHTML=ui.buttonChangeLanguageItalian;
document.getElementById("btn-de").innerHTML=ui.buttonChangeLanguageGerman;
lang =ui.textWinner;
player[0]=ui.namePlayer1;
player[1]=ui.namePlayer2;

})

//window.location.reload();     

})

Answer 1

不要为每种语言都有三个不同的JS文件，而是制作一个包含所有字符串的数组，比如("languages"变量(：

var selected_language=0;
//0=English
//1=Italian
//2=German
//Allow the player to change this number before the game starts.
var languages = [
/*ENGLISH*/["winner!","player1","player2","more english..."],
/*ITALIAN*/["winner in italian!","player1 in italian","player2 in italian","more italian..."],
/*GERMAN*/["winner in german!","player1 in german","player2 in german","more german..."]
];

alert( languages[selected_language][0] );
//Gives "winner!", as the selected language is English (0)

根据翻译字符串的数量，您可能需要将其移动到JSON文件中。

但你可以从这个开始。

你可以把字符串放在对象里面，但我认为这样做会更快。

如果有什么难以理解的地方，我很抱歉(我在手机上写的(。祝你好运