1

Всем привет. Итак, есть 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>

0

2 ответа 2

4

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

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>

3

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

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.