Question

我正在制作一个带有4个输入的简单计算器a，b，c＆amp; d并且需要能够交换c＆amp;的值。 d。例如，文本框c的值为45＆amp;文本框d的值为75.单击一个按钮，交换视图，使c = 75＆amp; d = 45

Answer 1

Javascript：

function swapValues(){
var tmp = document.getElementById("c").value;
document.getElementById("c").value = document.getElementById("d").value;
document.getElementById("d").value = tmp;

}

和HTML：

<input type="text"  id="a" value="1st" />
<input type="text"  id="b" value="2nd" />
<input type="text"  id="c" value="3rd" />
<input type="text"  id="d" value="4th" />
<input type="button"  id="go" onclick="swapValues()" value="Swap">

Answer 2

如果您使用jQuery，并且您的输入具有正确的ID，则应执行以下操作：

var t = $('#c').val();
$('#c').val($('#d').val());
$('#d').val(t);

尽管如此......这是非常微不足道的。

Answer 3

我假设您的HTML看起来像这样：

<input id="input-c">
<input id="input-d">

如果您正在使用jQuery（我推荐它），您可能会这样做：

var temp = $("#input-c").val();
$("#input-c").val($("#input-d").val());
$("#input-d").val(temp);

如果你愿意，你可以稍微优化一下，但它增加了几行：

var $inputC = $("#input-c");
var $inputD = $("#input-d");
var temp = $inputC.val();
$inputC.val($inputD.val());
$inputD.val(temp);

如果你不使用jQuery，你可能会这样做：

var inputC = document.getElementById("input-c");
var inputD = document.getElementById("input-d");
var temp = inputC.value;
inputC.value = inputD.value;
inputD.value = temp;

通常，这是交换两个变量值时的常见编程模式。你必须先做一个临时变量才能进行交换，否则一个变量会破坏另一个变量。

Answer 4

使用 Vanilla javascript 的概念可能是这样的...

HTML

<input type="text" placeholder="od" class="firstInput" />
<input type="text" placeholder="do" class="secondInput" />
<span class="inputExchange">
    <i class="fas fa-exchange-alt float-right"></i>
</span>

JavaScript：

let firstInput = document.querySelector(".firstInput");
let secondInput = document.querySelector(".secondInput");
let temp;
let inputExchange = document.querySelector(".inputExchange");
inputExchange.addEventListener("click", exchangeValue);

function exchangeValue() {
  temp = firstInput.value;
  firstInput.value = secondInput.value;
  secondInput.value = temp;
}

使用javascript在2个文本框中交换值

4 个答案: