How to swap values by changing one of them via javascript?

Question

There are three fields with numbers from 1 to 3. I am trying to make it so if a person uses only the arrows there should always be one "1", one "2", and one "3". Why is it not always working and how could I make it work?

jQuery(document).ready(function($) {
  var prevNumber;
  $(".numbers").focus(function() {
    prevNumber = $(this).val();
  }).change(function() {
    curNumber = $(this).val();
    $('.numbers[value="' + curNumber + '"]:not(:focus)').first().val(prevNumber);
    prevNumber = curNumber;
  });
});

<input type="number" value="1" min="1" max="3" step="1" class="numbers" />
<input type="number" value="2" min="1" max="3" step="1" class="numbers" />
<input type="number" value="3" min="1" max="3" step="1" class="numbers" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Here is a jsfiddle.

Answer 1

Why that approach doesn't work

The value attribute is not connected to the value of the input. I know that sound surprising. :-) The value attribute is the default value of the input. It doesn't change (unless you use setAttribute("value", x); or .defaultValue = x; to change it).

Your selector uses the attribute:

$('.numbers[value="' + curNumber + '"]')...

So it'll work on inputs whose value hasn't been changed by the user, but will fail once they have, selecting the wrong input.

How you could fix it

You could change the default value as well as the value by setting both defaultValue and value (being sure to update the defaultValue on the one that changed, too), like this (see comments):

jQuery(document).ready(function($) {
  var prevNumber;
  $(".numbers").focus(function() {
    prevNumber = $(this).val();
  }).change(function() {
    // Get the element wrapper
    var $this = $(this);
    
    // Get the current value
    var curNumber = $this.val();
    
    // Make sure the default value on this element is updated
    this.defaultValue = curNumber;
    
    // Update both the value and default value on the other
    // input that used to have this number
    $('.numbers[value="' + curNumber + '"]:not(:focus)').first().val(prevNumber).prop("defaultValue", prevNumber);
    prevNumber = curNumber;
  });
});

<input type="number" value="1" min="1" max="3" step="1" class="numbers" />
<input type="number" value="2" min="1" max="3" step="1" class="numbers" />
<input type="number" value="3" min="1" max="3" step="1" class="numbers" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

What I'd do instead (maybe -- your approach is growing on me)

I think I'd approach it without trying to remember state, e.g., just in the change: Get the number of the one that changed, then assign any other numbers to its siblings. See the comments:

var numbers = $(".numbers").map(function() { return this.value; }).get();
jQuery(document).ready(function($) {
  $(".numbers").change(function() {
    // Get a wrapper for this input
    var $this = $(this);
    // Get this number
    var thisNumber = $this.val();
    // Get the unused numbers
    var unused = numbers.filter(function(num) { return num != thisNumber; });
    // Assign them to the siblings, in order
    $this.siblings().val(function(index) {
      return unused[index];
    });
  });
});

<input type="number" value="1" min="1" max="3" step="1" class="numbers" />
<input type="number" value="2" min="1" max="3" step="1" class="numbers" />
<input type="number" value="3" min="1" max="3" step="1" class="numbers" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

I kept that general, rather than assuming the values would only be 1, 2, and 3 (and rather than assuming there'd only be three numbers).