Question

如何设计可以同时进行输入和输出的容器。我正在设计一个货币转换器，我想要一个框，用户可以在其中输入数据并输出计算出的货币。

我尝试了切换到分隔符而不是输入标签的代码，但是没有用。因此，在这一点上，我制作了两个输入框，然后简单地创建了函数，接受了输入并尝试将输入提供给另一个框。但这不起作用。

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相同。

Answer 1

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

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

然后在javascript中，您可以像这样输入-

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

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

inver.value = "output"

Answer 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>

Answer 3

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

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

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

Answer 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>

如何使标签适用于输入和输出

4 个答案: