无法获取数组 [0] 之后的值以正确翻译

Question

好的，首先我要说的是这是一个非常小的个人项目，几年前我只编写过一些代码类。我可以弄清楚很多（非常）基础知识，但很难排除故障。我有点不知所措，需要一个简单的解决方案。

我正在尝试组装一个非常简单的翻译器，它通过文本输入框从用户那里输入单词或句子，将字符串中的每个单词放入一个数组中，按顺序翻译每个单词，然后吐出按照输入的顺序输出每个翻译的单词。例如，输入“我喜欢猫”会用德语输出“Ich mag Katze”。

我已经掌握了其中的大部分内容，但除了要翻译的第一个数组元素外，我什么都得不到。结果就像“我喜欢猫”。

我使用了一个循环，可能是因为我是一个业余爱好者并且不知道其他的方法，我宁愿不使用任何库或任何东西。这是一个非常小的项目，我想让几个朋友在本地使用；而且我知道必须有一些非常简单的代码，只需要一个字符串，将它放入一个数组，将一个词换成另一个词，然后输出结果，但如果我能让它工作，我真该死。

我目前拥有的是最接近的，但正如我所说，它不起作用。我对循环进行了偷工减料，显然这是完全错误的方法，但我只见树木不见森林。如果你能帮助我，请将“Javascript for Babies”图画书的水平做成简单的，我怎么强调我都没有经验。对于我的 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

What it looks like

P.S。我不担心这里的最佳实践，这应该是一个快速项目，我可以将其发送给几个朋友，他们可以在浏览器中打开保存在本地的 HTML 文档，当他们想四处走动时如果他们想让他们的半兽人角色说“死在我的锤子下！”或者其他的东西。如果你有让它变得更整洁的建议，但我不担心一团糟，除了我，没有人会读这篇文章，希望一旦它被修复，我也永远不必再读它了！

Answer 1

既然是手动简单翻译，你就应该创建一个“词典”并用它来获取翻译。

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>

Answer 2

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>

无法获取数组 [0] 之后的值以正确翻译

Can't get values past array[0] to translate properly

javascript

arrays

loops