Question

在以下循环中，我对照数组值检查输入（word.value）：

  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;
            }

        }
  }

第一个if语句可以正常工作，但是如果我第二次在document.getElementById("translation").value = word.value;语句中使用else if，则第一个语句将无法正常工作。

没有第二个getElementById时，translation的值应为dictionary[i][1]中的值，但是当我添加第二个getElementById时， translation变成了dictionary[i][0]，而不是第一个if语句。

第二次使用getElementById为什么会影响第一次？

我需要word.value的第一个为dictionary[i][1]，第二个为dictionary[i][0]。

完整代码：

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>

Answer 1

问题在于您正在滥用 word.value -这是直接使用id单词引用div的原因。

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

使用上面的方法，您实际上在两个地方更改了值-具有id单词和转换的div。而是直接使用相应的词典条目（例如

）填充翻译的值

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

这是完整的示例：

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>

多次使用document.getElementById会弄乱If语句

1 个答案: