Swap values in 2 textboxes with javascript

Question

I'm making a simple calculator with 4 inputs a,b,c & d and need to have the ability to swap the values of c & d. For example textbox c has a value of 45 & textbox d has a value of 75. A button is clicked which swaps the vales so c=75 & d=45

Answer 1

Full Javascript Example

Javascript :

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

and 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

If you use jQuery, and your inputs have the right ids, this should do:

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

It's quite trivial, though...

Answer 3

I'm assuming your HTML looks something like this:

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

If you're using jQuery (I'd recommend it), you might do it like this:

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

You could optimize this a little bit if you wanted, but it adds a couple of lines:

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

If you're not using jQuery, you might do something like this:

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

In general, this is a common programming pattern when swapping the value of two variables. You have to make a temporary variable before you can do the swapping, otherwise one variable will clobber the other.

• Jaime Torres: There's no reason to involve jQuery in this, so the last part of the answer is the way to go.
• jcaron: @JaimeTorres, if the OP is already using jQuery in his page, using it makes sense. Of course, loading jQuery just for those 3 lines would be overkill.
• Jaime Torres: @jcaron I completely agree, but as this sounds like homework, I doubt this is the case.
• Yaje: and no jQuery tags placed.
• jcaron: @JaimeTorres my first instinct was to comment on the question "what code have you written yet?" or "what is actually the problem?", but then I got soft... :-)

Answer 4

The concept could be like this using 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;
}