CODEWITHSUNDEEP
javascriptjquery
take2
take2

Reputation: 614

Pure javascript way of swapping input values on click

Is there a pure javascript way of swapping input values when you click a div? You can see a working example with jquery here:

jsfiddle

<div id="swap">Click me</div>
<input id="one" value="One"/>
<input id="two" value="Two"/>

<script type="text/javascript">
    $("#swap").click(function(e) {
        e.preventDefault();

        var fromVal = $("#one").val();
        var toVal = $("#two").val();

        $("#one").val(toVal);
        $("#two").val(fromVal);
    });
</script>

There are many examples of doing this with jquery, but I haven't found a pure javascript way of doing it.

Upvotes: 0

Views: 1098

Answers (6)

Jo&#227;o Paulo Motta
Jo&#227;o Paulo Motta

Reputation: 3892

Here is the pure javascript version of it:

HTML

var one = document.getElementById("one");
var two = document.getElementById("two");
document.getElementById("swap").addEventListener("click", function() {
    var fromVal = one.value;
    var toVal = two.value;
    one.value = toVal;
    two.value = fromVal;
});
<div id="swap">Click me</div>
<input id="one" value="One"/>
<input id="two" value="Two"/>

Upvotes: 1

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53598

Of course.

<button id="swap">Click me</button>
<input id="one" value="One"/>
<input id="two" value="Two"/>

<script>
    var btn = document.getElementById("swap");
    btn.addEventListener("click", function(e) {
      var from = document.getElementById("one"),
          to = document.getElementById("two");
      if(!!from && !!to) {
        var _ = from.value;
        from.value = to.value;
        to.value = _;
      } else {
        console.log("some input elements could not be found");
      } 
    });
</script>

The equivalent of jQuery's $(...) is actually document.querySelector, so we could have used document.querySelector("#swap"), too, but if you have an element id, there is a dedicated getElementById that's faster, so you typically don't bother with query selecting.

Also note that the equivalent to jQuery's click is actually .addEventListner, not .onclick. The first lets you register arbitrarily many handlers, the latter is an exclusive handler that gets overwritten if you ever try to add a second, third, etc. event handler. It's from an older version of JavaScript, don't use it =)

The swap is then simply the same as with any programming language, where you get your two inputs, cache one of them, reassigned the one you just cached, and them assign the cached value to the other input.

cached <- a.val
a <- b.val
b <- cached

Finally, note this code doesn't say it's "text/javascript". In HTML5, this is not a thing you say anymore. Anything that's just <script> is assumed javascript unless you explicitly mention another type.

Upvotes: 7

bardzusny
bardzusny

Reputation: 3838

EDIT: I updated my answer to use addEventListener() instead of assigning function to ancient onclick element property. For explanation: please see (and upvote!) accepted answer by @Mike 'Pomax' Kamermans, who was the first user in this question who posted answer using this approach.

jsfiddle: http://jsfiddle.net/qo33n4q0/3/

Code is pretty analogical to jQuery version posted above:

var inputOne = document.getElementById('one');
var inputTwo = document.getElementById('two');
var swapButton = document.getElementById('swap');

swapButton.addEventListener('click', function (e) {
  e.preventDefault(); // optional - unless our button is a link/submit input
  var fromVal = inputOne.value;
  var toVal = inputTwo.value;

  inputOne.value = toVal;
  inputTwo.value = fromVal;
});

I'm not sure about your motivation for switching to vanilla JS, but most of the time it's easier to just use jQuery. Unless you care about performance.

Nice, entertaining (but actually serious and enlightening, in a way) read about this whole issue (frameworks vs. vanilla): Vanilla JS framework

Upvotes: 2

alessandrio
alessandrio

Reputation: 4370

var swap = document.getElementById("swap");
swap.addEventListener("click", function(){
    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var fromVal = document.getElementById("one").value;
    var toVal = document.getElementById("two").value;

    one.value=toVal;
    two.value=fromVal;

    return false;
}, !0);

Upvotes: 0

user2182349
user2182349

Reputation: 9782

document.getElementById("swap").onclick = function(evt) {
    var tmp, one, two;
    evt.preventDefault();
    one = document.getElementById("one");
    two = document.getElementById("two");
    tmp = one.value;
    one.value = two.value;
    two.value = tmp;
}

Upvotes: 1

Thriggle
Thriggle

Reputation: 7059

Yep, everything the jQuery is doing in your example has a corresponding approach in pure JavaScript:

document.getElementById("swap").onclick =
  function(e) {
    e.preventDefault();
    var inputOne = document.getElementById("one");
    var fromVal = inputOne.value;

    var inputTwo = document.getElementById("two");
    var toVal = inputTwo.value;

    inputOne.value = toVal;
    inputTwo.value = fromVal;
  };
<div id="swap">Click me</div>
<input id="one" value="One" />
<input id="two" value="Two" />

Upvotes: 3

Related Questions