Обмен содержимым input[type=text]

Question

Есть два <input> с типом text:

Населенный пункт отправления.
Населенный пункт получения.

Рядом с ними есть кнопка swap (представлена тегом* <img>). По нажатию на эту кнопку, содержимое input 1 должно стать содержимым input 2 и наоборот.

В общем, обмен содержимым. Как это реализовать?

<div class="form-input">
  <h3 class="form-input-heading">Откуда</h3>
  <div class="form-input-content">
    <input onkeyup="check();" autofocus="" class="input input1" id="city1" placeholder="Например, Москва" required="" type="text"> <label class="iput-label input-label-req" for="city1">Населенный пункт</label>
  </div>
  <div class="input-error input-error1">
    Поле «Населённый пункт» обязательно для заполнения.
  </div>
</div>
<div class="form-input">
  <div class="flex space-btw form-input-group">
    <h3 class="form-input-heading">Куда</h3>
    <div>
      <img alt="" class="arrows" id="form-input-png" src="reload.svg"></div>
  </div>
  <div class="form-input-content">
    <input onkeyup="check();" autofocus="" class="input input2" id="city2" placeholder="Например, Москва" required="" type="text"> <label class="iput-label input-label-req" for="city2">Населенный пункт</label>
  </div>
  <div class="input-error input-error2">
    Поле «Населённый пункт» обязательно для заполнения.
  </div>
</div>

Answer 1

function swap() {
  const [a, b] = [
    document.getElementById('a'),
    document.getElementById('b')
  ];
  [a.value, b.value] = [b.value, a.value];
}

<input id="a" type="text">
<input id="b" type="text">
<button onClick="swap()">Swap</button>

БЛОГ НА HUSL

Обмен содержимым input[type=text]

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