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.

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.

• javascript
• jquery

Share Improve this question Follow asked May 1, 2015 at 15:39 take2take2 61422 gold badges1717 silver badges3232 bronze badges 5

• $("#id").val() is the same as document.getElementById('id').value. What's the problem? – Barmar Commented May 1, 2015 at 15:42
• 2 everything that jQuery does, you can do with plain JavaScript. So the question isn't "is there a way" but "how do I do this in vanilla JS" – Mike 'Pomax' Kamermans Commented May 1, 2015 at 15:42
• @Mike'Pomax'Kamermans and I'd always add "is it worth doing?" Meaning is 1 line of jQuery abstracting 10,000 lines of JS :) – dmeglio Commented May 1, 2015 at 15:43
• 1 And $("#swap").click(func) is equivalent to document.getElementById("click").addEventListener("click", func). These are all very simple translations, there's nothing fancy going on in your handler. – Barmar Commented May 1, 2015 at 15:44
• But why down vote the man? – João Paulo Motta Commented May 1, 2015 at 15:48

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 7

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.

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" />

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

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;
}

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"/>

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);