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

Okay, to start with I should mention this is a very small personal project, and I’ve only have a handful of coding classes several years ago now. I can figure out a lot of the (very) basics, but have a hard time troubleshooting. I’m in a little bit over my head here, and need a dumbed down solution.

I’m trying to put together a VERY simple translator that takes in a word or sentence from the user via a text input box, puts each word of the string into an array, translates each word in order, then spits out each translated word in the order it was input. For example, typing “I like cats” would output “Ich mag Katze” in German.

I’ve got most of it, but I CAN’T get anything but the first array element to translate. It comes out like “Ich like cats”.

I’ve used a loop, probably because I’m an amateur and don’t know another way of doing this, and I’d rather not use any libraries or anything. This is a very small project I want to have a couple of friends utilize locally; and I know there has to be some very simple code that will just take a string, put it into an array, swap one word for another word, and then output the results, but I’m damned if I can make it work.

What I currently have is the closest I’ve gotten, but like I said, it doesn’t work. I’ve jerry-rigged the loop and clearly that’s the totally wrong approach, but I can’t see the forest for the trees. If you can help me, please make it “Javascript for Babies” picture book levels of simple, I cannot stress enough how inexperienced I am. This is just supposed to be a fun little extra thing for my D&D group.

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. I’m not worried about Best Practices here, this is supposed to be a quickie project that I can send to a couple friends and they can open the HTML doc, saved locally, in their browser when they want to mess around with it if they want their half-orc character to say “die by my hammer!” or something. If you have suggestions for making it neater great, but I’m not worried about a mess, no one is going to be reading this but me, and hopefully once it’s fixed I’ll never have to read it again either!

Answer

Since it is a manual simple translation, you should just create a “dictionary” and use it to get the translations.

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>

---

Or if you want it a little more organized, you could use

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>