В чем отличие input от textarea?

Question

[Vlad Yanukovich]

Здравствуйте дамы и господа. Есть вопрос.

В чем отличие textarea и input? Я поясню саму суть: меня не интересует, что одно это многострочные текста, а второе это одна строчка и подобное.

Вот почему возник вопрос: почему когда я использую value у кнопок, в textarea он спокойно вставляется, а вот когда хочу применить тоже самое к input, value вставляется, но не отображается?

На скрине видно, что оба подхода работают, однако, один отображает текст внутри поля, а второй нет.

Поясните, пожалуйста, в чем различие.

btns.forEach(function(btn) {
    btn.addEventListener('click', function() {
        textarea.append(btn.value);
        input.append(btn.value);
    })
})

<button class="btn" value="1">click</button>
    <button class="btn" value="2">click</button>
    <button class="btn" value="3">click</button>
    <button class="btn" value="4">click</button>
    <button class="btn" value="5">click</button>

    <textarea name="textarea" id="" cols="30" rows="10"></textarea>
    <input type="text">

Answer 1

[Алексей Уколов]

У инпута не может быть содержимого, поэтому в него нельзя сделать append().
input.value += btn.value;

Comments

[Vlad Yanukovich]

а как тогда называть то, что мы вводим туда ручками? не содержимое?

а есть еще какие-то варианты вставки того же value в input, кроме того, что Вы указали?

[Алексей Уколов]

а как тогда называть

Изменение атрибута value.

а есть еще какие-то варианты

Давайте для начала выясним, чем вас не устраивает этот.

[Vlad Yanukovich]

Алексей Уколов, этот метод вполне меня устраивает) я просто думаю, что он не единственный, поэтому и спрашиваю, есть ли еще какие-то варианты

[Алексей Уколов]

input.setAttribute('value', input.getAttribute('value') + btn.value)

Но я не помню генерирует ли этот способ стандартные события изменения на элементе.

[Vlad Yanukovich]

Алексей Уколов, благодарю, буду иметь ввиду и этот вариант с заданием атрибута элементу. Помечу Ваш ответ решением. Еще раз спасибо

[Алексей Уколов]

Наверняка, есть ещё варианты. По запросу "html input set value from js", наверняка, найдётся несколько хороших статей с разбором деталей.

[Vlad Yanukovich]

Алексей Уколов, Тут появился обратный вопрос, а как удалить предыдущее значение из инпута(так же через отдельную кнопку)? В textarea я просто через slice() делал, а тут такое не прокатит же

[Алексей Уколов]

Это строка и работать с ней нужно как со строкой.
Если же вам нужно прям очистить всё, то просто input.value = '';

[Vlad Yanukovich]

Алексей Уколов, ага, я понял, ну полностью содержимое сразу все удалить я знаю как, сейчас только буду думать как по одному символу убрать, спасибо еще раз

[Сергей delphinpro]

Я немножко дополню.

У тега textarea нет атрибута value, это верно. Но в объектной модели документа у элементов HTMLTextAreaElement атрибут value есть. Так же, как и у элемента HTMLInputElement. И именно его рекомендуется использовать для чтения и установки значений элементам из javascript-кода.
Это textarea.append(btn.value);, извините, дичь какая-то.
Значение атрибута value — всегда строка. Вы можете использовать любые строковые методы для его изменения.