Передача значения цвета из одного input в другой input и обратно при повторном клике на кнопке

Question

Всем привет. Итак, есть input color 111 и 112. При нажатии нужно, чтобы значения первого цвета перешло второму, а второе первому

function f11() {
  let a = document.querySelector('.i-111').value;
  let b = document.querySelector('.i-112').value;

  a.value = b.value;
  b.value = a.value;
}


document.querySelector('.b-11').onclick = f11;

<div class="form-control">Input i-111 <input type="color" class="i-111"></div>
<div class="form-control">Input i-112 <input type="color" class="i-112"></div>
<button class="button-primary b-11">Task-11</button>

Answer 1

Правильно будет так:

let tempValue = a.value;
a.value = b.value;
b.value = tempValue;

Потому что как только вы сделали так:

a.value = b.value;

то в a будет храниться b и в b будет b. Как следствие в a уже будет новое значение и старое взять уже неоткуда.

Чтобы этого перетирания не происходило - вводится третья переменная, которая хранит значение одного из инпутов до вмешательства

function f11() {
  let a = document.querySelector('.i-111');
  let b = document.querySelector('.i-112');

  let tempValue = a.value;
  a.value = b.value;
  b.value = tempValue;
}


document.querySelector('.b-11').onclick = f11;

<div class="form-control">Input i-111 <input type="color" class="i-111"></div>
<div class="form-control">Input i-112 <input type="color" class="i-112"></div>
<button class="button-primary b-11">Task-11</button>

Answer 2

Комментарии все те же что и у Алексея. Лишь добавлю вариант с деструктурирующим присваиванием.

function f11() {
  let a = document.querySelector('.i-111');
  let b = document.querySelector('.i-112');

  
  [a.value,b.value] = [b.value,a.value];
}


document.querySelector('.b-11').onclick = f11;

<div class="form-control">Input i-111 <input type="color" class="i-111"></div>
<div class="form-control">Input i-112 <input type="color" class="i-112"></div>
<button class="button-primary b-11">Task-11</button>

БЛОГ НА HUSL

Передача значения цвета из одного input в другой input и обратно при повторном клике на кнопке

Ответы (2 шт):