Using document.getElementById more than once messes up If-statement

In the following loop, I check an input (word.value) against array values:

  for(var i = 0; i < dictionary.length; i++){
        for(var i2 = 0; i2 < 2; i2++){

            if(word.value == dictionary[i][0]){
                word.value = dictionary[i][1];
                console.log(word.value);
                document.getElementById("translation").value = word.value;
            }
            else if(word.value == dictionary[i][1]){
                word.value = dictionary[i][0];
                document.getElementById("translation").value = word.value;
            }

        }
  }

The first if statement works fine, but if I use document.getElementById("translation").value = word.value; second time in the else if statement, then the first one wont work properly.

Without the second getElementById, the value of translation is as it should be, the value in dictionary[i][1], but when I added the second getElementById, the value of translation became dictionary[i][0] instead in the first if statement.

Why does using the getElementById second time affect the first one?

I need the word.value to be dictionary[i][1] in the first and dictionary[i][0] in the second.

Full code:

function CheckDictionary() {

  var word = document.getElementById("word");

  /* if(word.value == "auto"){         For debugging purposes.
      word.value = "car";
  }
  else if (word.value == "car"){
      word.value = "auto";
  } */

  // console.log(dictionary.length); // 3
  // console.log(dictionary[0][0]); // 1

  console.log(word.value);

  var dictionary = [
    ["car", "auto"],
    ["phone", "puhelin"],
    ["number", "numero"]
  ];

  for (var i = 0; i < dictionary.length; i++) {
    for (var i2 = 0; i2 < 2; i2++) {

      if (word.value == dictionary[i][0]) {
        word.value = dictionary[i][1];
        console.log(word.value);
        document.getElementById("translation").value = word.value;
      } else if (word.value == dictionary[i][1]) {
        word.value = dictionary[i][0];
        // document.getElementById("translation").value = word.value; Try with and without this.
      }

    }
  }



}

* {
  box-sizing: border-box;
}

html {
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  height: auto;
  width: 100%;
  background-color: cornflowerblue;
}

#FormWrap {
  background-color: antiquewhite;
  width: 300px;
  height: auto;
  margin: 50px auto;
  border: 8px solid gold;
  border-radius: 5px 25px;
  text-align: center;
}

#FormHead {
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-align: center;
  color: crimson;
  text-shadow: 2px 1px black;
}

.form {
  color: black;
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-align: center;
  width: 100%;
}

#CheckButton {
  position: relative;
  display: block;
  margin: 0 auto;
  color: purple;
  background-color: greenyellow;
  border-color: green;
  border-radius: 2px;
  height: 40px;
  font-weight: bold;
  font-family: "Comic Sans MS", cursive, sans-serif;
}

#CheckButton:hover {
  color: white;
  background-color: red;
}

#ResetButton {
  color: purple;
  background-color: greenyellow;
  border-color: green;
  border-radius: 2px;
  height: 40px;
  width: 100%;
  padding: 0px;
  font-weight: bold;
  font-family: "Comic Sans MS", cursive, sans-serif;
}

#ResetButton:hover {
  color: white;
  background-color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="task8.css">
  <script type="text/javascript" src="task8.js"></script>
  <title>Task8</title>
</head>

<body>

  <div id="FormWrap">
    <!-- Wrapper for Dictionary form -->

    <h1 id="FormHead">Dictionary</h1>
    <!-- Dictionary form heading -->

    <form class="form">
      <!-- Dictionary form -->

      Word:<br>
      <input type="text" id="word" name="Word"><br> Translation:

      <br>
      <input type="text" id="translation" readonly><br><br>

      <input type="button" id="CheckButton" value="Translate" onclick="CheckDictionary()"><br>
      <!-- CheckDictionary button -->

      <input type="reset" id="ResetButton" value="Reset" /> <br><br>
      <!-- Reset the form -->

    </form>

  </div>

</body>

</html>

Solution

The problem is that you're abusing word.value - which is a direct reference to your div with the id word.

  if (word.value == dictionary[i][0]) {
    word.value = dictionary[i][1];
    console.log(word.value);
    document.getElementById("translation").value = word.value;
  }

With the above you're essentially changing the value in two places - the divs with the id word AND translation. Instead populate the value of translation directly using the appropriate dictionary entry like

  if (word.value == dictionary[i][0]) {
    document.getElementById("translation").value = dictionary[i][1];
  }

Here's the complete example:

function CheckDictionary() {

  var word = document.getElementById("word");

  /* if(word.value == "auto"){         For debugging purposes.
      word.value = "car";
  }
  else if (word.value == "car"){
      word.value = "auto";
  } */

  // console.log(dictionary.length); // 3
  // console.log(dictionary[0][0]); // 1

 

  var dictionary = [
    ["car", "auto"],
    ["phone", "puhelin"],
    ["number", "numero"]
  ];

  for (var i = 0; i < dictionary.length; i++) {
    for (var i2 = 0; i2 < 2; i2++) {
      if (word.value == dictionary[i][0]) {
       
        document.getElementById("translation").value = dictionary[i][1];
      } else if (word.value == dictionary[i][1]) {
         document.getElementById("translation").value = dictionary[i][0];
      }

    }
  }



}

* {
  box-sizing: border-box;
}

html {
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  height: auto;
  width: 100%;
  background-color: cornflowerblue;
}

#FormWrap {
  background-color: antiquewhite;
  width: 300px;
  height: auto;
  margin: 50px auto;
  border: 8px solid gold;
  border-radius: 5px 25px;
  text-align: center;
}

#FormHead {
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-align: center;
  color: crimson;
  text-shadow: 2px 1px black;
}

.form {
  color: black;
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-align: center;
  width: 100%;
}

#CheckButton {
  position: relative;
  display: block;
  margin: 0 auto;
  color: purple;
  background-color: greenyellow;
  border-color: green;
  border-radius: 2px;
  height: 40px;
  font-weight: bold;
  font-family: "Comic Sans MS", cursive, sans-serif;
}

#CheckButton:hover {
  color: white;
  background-color: red;
}

#ResetButton {
  color: purple;
  background-color: greenyellow;
  border-color: green;
  border-radius: 2px;
  height: 40px;
  width: 100%;
  padding: 0px;
  font-weight: bold;
  font-family: "Comic Sans MS", cursive, sans-serif;
}

#ResetButton:hover {
  color: white;
  background-color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="task8.css">
  <script type="text/javascript" src="task8.js"></script>
  <title>Task8</title>
</head>

<body>

  <div id="FormWrap">
    <!-- Wrapper for Dictionary form -->

    <h1 id="FormHead">Dictionary</h1>
    <!-- Dictionary form heading -->

    <form class="form">
      <!-- Dictionary form -->

      Word:<br>
      <input type="text" id="word" name="Word"><br> Translation:

      <br>
      <input type="text" id="translation" readonly><br><br>

      <input type="button" id="CheckButton" value="Translate" onclick="CheckDictionary()"><br>
      <!-- CheckDictionary button -->

      <input type="reset" id="ResetButton" value="Reset" /> <br><br>
      <!-- Reset the form -->

    </form>

  </div>

</body>

</html>