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

时间:2019-07-08 05:16:25

标签: javascript html

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

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

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

4 个答案:

答案 0 :(得分:1)

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

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

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

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

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

inver.value = "output"

答案 1 :(得分:0)

使用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>

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:-1)

要将值设置为第二输入,请使用

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>