如何使标签同时适用于输入和输出[重复]答案

【问题标题】：How can I make a tag work for both input and output [duplicate]如何使标签同时适用于输入和输出[重复]
【发布时间】：2019-11-17 14:32:25
【问题描述】：

如何设计一个既能做输入又能输出的容器。我正在设计一个货币转换器，我想要一个用户可以输入数据并输出计算货币的盒子。

我已经尝试使用切换到分隔符而不是输入标记的代码，但它没有工作。所以此时我已经制作了两个输入框，函数很简单，接受一个输入并尝试向另一个输入框提供输入。但它不起作用。

input {
  background-color: lightgrey;
  width: 120px;
  border: 3px solid green;
  padding: 10px;
  margin: 5px;
}

<html>
<body>
  Country1:<input type="text" id="in"><br> Country2:
  <input type="text" id="inver"><br>
  <button onclick="Go()">
      Click me
  </button>
  <p id="Country1">
  </p>
  <script language="javascript" type="text/javascript">
    function Go() {
      var text = document.getElementById("in").value;
      document.getElementById("inver").innerHTML = text;
    }
  </script>
</body>
</html>

结果应显示国家 2 输入值与国家 1 相同。

【问题讨论】：

您的应用中是否使用了任何框架？（Vue、React、Angular 等？）似乎您需要使用 two way data binding 方法。
设置document.getElementById("inver").value = document.getElementById("in").value

标签： javascript html

【解决方案1】：

您可以使用此文本字段方法 -

<input id="inver" type="text">

然后在 javascript 中你可以像这样接受输入 -

var inver = document.getElementById('inver')
var inp = inver.value

然后在javascript中你可以这样输出-

inver.value = "output"

【讨论】：

【解决方案2】：

使用value而不是innerHTML，input types有价值

function Go() {
  var text = document.getElementById("in").value;
  document.getElementById("inver").value = text; // use value
}

input {
  background-color: lightgrey;
  width: 120px;
  border: 3px solid green;
  padding: 10px;
  margin: 5px;
}

<html>

<body>
  Country1:<input type="text" id="in"><br> Country2:
  <input type="text" id="inver"><br>
  <button onclick="Go()">
Click me
</button>
  <p id="Country1">

  </p>

</body>

</html>

【讨论】：

更快找到骗子，不是吗？
嗯，是的，找到骗子更快，但他是新用户，所以想回答:)

【解决方案3】：

因为都是输入框，所以需要改值，而不是innerHTML

function Go() {
  var text = document.getElementById("in").value;

  // change this code
  document.getElementById("inver").value = text;
}

【讨论】：

【解决方案4】：

将值设置为第二个输入使用

inver.value = text;

input {
  background-color: lightgrey;
  width: 120px;
  border: 3px solid green;
  padding: 10px;
  margin: 5px;
}

<html>

  <body>
    Country1:<input type="text" id="in"><br>
    Country2:<input type="text" id="inver"><br>
    <button onclick="Go()">
Click me
</button>
    <p id="Country1">

    </p>
    <script language="javascript" type="text/javascript">
      function Go() {
        var text = document.getElementById("in").value;
        inver.value = text;
      }

    </script>
  </body>

</html>

【讨论】：

你为什么不费心在第二个字段上使用 getElementById 来混淆菜鸟？我知道现代浏览器允许这样做，但它既不直观也不一致。无论如何，这是一个很容易找到的骗局