無法通過陣列[0]獲取值以正確翻譯-有解無憂

好的，首先我應該提到這是一個非常小的個人專案，幾年前我只有少數編碼課程。我可以弄清楚很多（非常）基礎知識，但很難排除故障。我在這里有點過頭了，需要一個愚蠢的解決方案。

我正在嘗試組裝一個非常簡單的翻譯器，它通過文本輸入框從用戶那里輸入一個單詞或句子，將字串的每個單詞放入一個陣列中，按順序翻譯每個單詞，然后將每個翻譯的單詞吐出輸入的順序。例如，輸入“我喜歡貓”會在德語中輸出“Ich mag Katze”。

我已經掌握了大部分內容，但除了要翻譯的第一個陣列元素外，我什么也得不到。它就像“像貓一樣”。

我使用了一個回圈，可能是因為我是一個業余愛好者并且不知道這樣做的另一種方法，我寧愿不使用任何庫或任何東西。這是一個非常小的專案，我想讓幾個朋友在本地使用；而且我知道必須有一些非常簡單的代碼，它只需要一個字串，將它放入一個陣列中，將一個單詞換成另一個單詞，然后輸出結果，但如果我能讓它作業，我該死的。

我目前擁有的是最接近的，但就像我說的那樣，它不起作用。我已經對回圈進行了杰瑞操縱，顯然這是完全錯誤的方法，但我無法只見樹木不見森林。如果你能幫助我，請把它做成“嬰兒用的Javascript”圖畫書級別的簡單，我怎么強調我是多么缺乏經驗。對于我的 D&D 團隊來說，這應該是一件有趣的小事。

function checkForTranslation(input, outputDiv) {
  var input = document.getElementById("inputTextField").value;
  var outputDiv = document.getElementById("translationOutputDiv");
  input = input.toLowerCase();

  //puts user input into an array and then outputs it word by word
  const myArray = input.split(" "); //added .split, thank you James, still otherwise broken
  let output = "";
  let translation = "";

  for (let i = 0; i < myArray.length; i  ) {
    output  = myArray[i]; //up to here, this works perfectly to put each word in the string into an array

    //prints all words but doesnt translate the second onwards
    translation  = myArray[i];
    if (output == "") {
      //document.getElementById("print2").innerHTML = "Translation Here";
    }
    else if (output == "apple") {
      translation = "x-ray";
    }
    else if (output == "banana") {

      translation = "yak";
    }
    else {
      translation = "???";
    }

    output  = " "; //adds a space when displaying original user input

  } // END FOR LOOP

  document.getElementById("print").innerHTML = output; //this outputs the original user input to the screen
  document.getElementById("print3").innerHTML = translation; //this should output the translated output to the screen
} // END FUNCTION CHECKFORTRANSLATION

它看起來像什么

PS我不擔心這里的最佳實踐，這應該是一個快速專案，我可以發送給幾個朋友，他們可以打開本地保存的 HTML 檔案，在他們的瀏覽器中，如果他們想弄亂它的話他們希望他們的半獸人角色說“死在我的錘子下！” 或者其他的東西。如果你有讓它更整潔的建議，但我不擔心一團糟，除了我之外沒有人會讀這個，希望一旦它被修復，我也永遠不必再讀它了！

uj5u.com熱心網友回復：

由于它是手動簡單的翻譯，您應該創建一個“字典”并使用它來獲取翻譯。

var dictionary = {
  "apple": "x-ray",
  "banana": "yak"
}

function checkForTranslation() {
  var input = document.getElementById("inputTextField").value.toLowerCase();


  var words = input
    .split(' ') // split string to words
    .filter(function(word) { // remove empty words
      return word.length > 0
    });

  var translatedWords = words.map(function(word) {
    var wordTranslation = dictionary[word]; // get from dictionary
    if (wordTranslation) {
      return wordTranslation;
    } else { // if word was not found in dictionary
      return "???";
    }
  });

  var translatedText = translatedWords.join(' ');
  document.getElementById("translationOutputDiv").innerHTML = translatedText;
}

document.getElementById('translate').addEventListener('click', function() {
  checkForTranslation();
});

<input type="text" id="inputTextField" />
<button id="translate">translate</button>
<br/>
<hr />
<div id="translationOutputDiv"></div>

或者如果你想讓它更有條理，你可以使用

const dictionary = {
  "apple": "x-ray",
  "banana": "yak"
}

function getTranslation(string) {
  return string
    .toLowerCase()
    .split(' ')
    .filter(word => word)
    .map(word => dictionary[word] || '???')
    .join(' ');
}

function translate(inputEl, outputEl) {
  outputEl.innerHTML = getTranslation(inputEl.value);
}


document.querySelector('#translate').addEventListener('click', function() {
  const input = document.querySelector('#inputTextField');
  const output = document.querySelector('#translationOutputDiv');
  translate(input, output);
});

<input type="text" id="inputTextField" />
<button id="translate">translate</button>
<br/>
<hr />
<div id="translationOutputDiv"></div>

uj5u.com熱心網友回復：

var input = document.getElementById("inputTextField").value;
var outputDiv = document.getElementById("translationOutputDiv");

function checkForTranslation(input, outputDiv) {
  // what you had
  //input = input.toLowerCase();
  input = input.value.toLowerCase();

  //puts user input into an array and then outputs it word by word
  const myArray = input.split(" "); //added .split, thank you James, still otherwise broken
  //console.log(myArray);
  //let output = "";
  let translation = "";

  for (let i = 0; i < myArray.length; i  ) {
    //what you had
    //output  = myArray[i]; //up to here, this works perfectly to put each word in the string into an array

    //prints all words but doesnt translate the second onwards
    //translation  = myArray[i];
    //if (output == "")
    if (myArray[i] == "")
    {
      //document.getElementById("print2").innerHTML = "Translation Here";
    }
    //else if (output == "apple")
    else if (myArray[i] == "apple")
    {
      //translation = "x-ray";
      myArray[i] = "x-ray";
    }
    //else if (output == "banana")
    else if (myArray[i] == "banana")
    {
      //translation = "yak";
      myArray[i] = "yak";
    }
    else
    {
      //translation = "???";
      myArray[i] = "???";
    }

  } // END FOR LOOP

  output = myArray.join(" ");

  document.getElementById("print").innerHTML = output; //this outputs the original user input to the screen
  document.getElementById("print3").innerHTML = translation; //this should output the translated output to the screen
} // END FUNCTION CHECKFORTRANSLATION

<html>
<body>
<input id="inputTextField" value="" placeholder="Whatchu tryna say?">

<div id="translationOutputDiv">
</div>

<button onclick="checkForTranslation(document.getElementById('inputTextField'), document.getElementById('translationOutputDiv'))">
I got you fam
</button>

<div id="print">
</div>

<div id="print3">
</div>



</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/473531.html

標籤：javascript 数组循环

上一篇：您能否與我分享有關Dart中[...]的資訊？

下一篇：在物件內傳播陣列會產生意想不到的結果-Javascript