Почему я не могу в input вывести value тэга select?

Question

Мне надо, чтоб value, выбранного option, выводилось в input. Почему я не могу этого сделать?

const s18 = document.querySelector('.s-18');
const i18 = document.querySelector('.i-18');
const out = document.querySelector('.out');

function f18() {
    i18.innerHTML = (s18.value);
}
document.querySelector('.s-18').onchange = f18;

<select class="s-18">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="five">5</option>
</select>

<div>
  Input: <input type="text" class="i-18">
</div>

Answer 1

Проблема в типе элемента

value applies only to objects that have the value attribute (normally, form controls).

innerHtml applies to every object that can contain HTML (divs, spans, but many other and also form controls).

если в кратце - если элемент содержит атрибут value используйте его, иначе innerHtml

const s18 = document.querySelector('.s-18');
const i18 = document.querySelector('.i-18');
const out = document.querySelector('.out');

function f18() {
    i18.value = (s18.value);
}
document.querySelector('.s-18').onchange = f18;

<select class="s-18">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="five">5</option>
</select>

<div>
  Input: <input type="text" class="i-18">
</div>

Ваш вариант работает для других элементов

const s18 = document.querySelector('.s-18');
const i18 = document.querySelector('.i-18');
const out = document.querySelector('.out');

function f18() {
    i18.innerHTML = (s18.value);
}
document.querySelector('.s-18').onchange = f18;

<select class="s-18">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="five">5</option>
</select>

<div>
  Input: <div class="i-18"></div>
</div>

БЛОГ НА HUSL

Почему я не могу в input вывести value тэга select?

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