Как сделать «склеивание» содержимого ячейки с содержимым поля для ввода текста?

Question

[Nikolletss]

Здравствуйте, пожалуйста, подскажите, как это реализовать.
Есть поле для ввода текста () , рядом с этим полем есть кнопка.
Над полем есть таблица с произвольным содержимым ячеек (текст, картинки).
Необходимо сделать так, чтобы при нажатии на кнопку рядом с полем ввода текста, введенный в этом поле текст "склеивался" с содержимым одной из ячеек и выводил значение "содержимое ячейки и содержимое поля для ввода текста".
Спасибо!

Answer 1

[Денис Инешин]

https://angularjs.org/ - первая демка)

А вообще, вам поможет +=
Например так:
my_div.innerHTML += 'новый текст';

jsfiddle.net/IonDen/5nuvsdkn

var test = document.getElementById('test'),
    input = document.getElementById('inp');

input.addEventListener('change', function () {
    var val = this.value;
    this.value = '';
    
    test.innerHTML += val; // <-- вот тут добавляем текст к нашему полю
});

Comments

[Nikolletss]

Денис, спасибо за ответ. Но я не могу понять все равно(

[Nikolletss]

У меня есть такая строчка input type=button value="New Button" onClick="document.getElementById('inp1').value; Что к ней надо добавить, чтобы произошло склеивание с ячейкой таблицы и в этой же ячейке и отразилось? Например, в ячейке написано "блюдо дня", в поле для ввода текста ввожу "суп", нажимаю на кнопку и в ячейке, где было "блюдо дня" появилось "блюдо дня суп"? Извините, за вопрос, понимаю, что он простой, но не могу никак найти как это реализовать.

[Денис Инешин]

Nikolletss: jsfiddle.net/IonDen/5nuvsdkn вот так

[Nikolletss]

Я понимаю, что это может вызвать смех, но, имею такое задание.
1. Нарисовать две таблицы 3х3, одну под другой. В нижней таблице заполнить все 9 ячеек произвольным содержимым (текст, картинки - все равно), а в верхней - в каждой из девяти ячеек расположить кнопку ().

2. Написать на Javascript реакцию на клик мышкой по любой ячейке
нижней таблицы, так чтобы при клике на ячейку она становилась
невидимой (свойство стиля display = none), а нажатие соответствующей кнопки в ячейку верхней таблицы возвращало бы скрытую ячейку в
нижней таблице назад.

3. Под нижней таблицей расположить элемент . Оформить его так, чтобы у него была видка рамка вокруг него, тень и не белый фон.

4. Добавить в ячейки нижней таблицы реакцию на наведение курсора мышки на ячейку (событие onMouseOver - по аналогии со знакомым нам onClick), чтобы при срабатывании этого события содержимое этой ячейки (свойство innerHTML) копировалось бы в элемент , созданный в п.3.

5. Добавить под элементом из п.3 поле для текстового ввода () и кнопку рядом с ней. Написать реакцию на нажатие этой кнопки так, чтобы набранный в поле для ввода текста на момент нажатия текст "приклеевался" бы к содержимому левой верхней ячейки нижней таблицы. (Например: в ячейке написано "Some text" и размещена картинка ("Some text<картинка>"). Мы набираем в поле для ввода текста "More text" и нажимаем на кнопку. В результате содержимое левой верхней ячейки меняется на "Some text<картинка>More text").

С пунктами 4 и 5 явно проблемы.

Выполняю как тут: jsfiddle.net/Nikolletss/81sdjyqf

[Денис Инешин]

Nikolletss: это уже задание, видимо вам еще немного рановато его делать.

[Nikolletss]

Денис Инешин: Денис, пожалуйста, хотя бы натолкните на 4 и 5 пункт.Пожалуйста, я ужу перерыла кучу информации, но никак в голове не укладывается пока.

[Денис Инешин]

td.addEventListener('mousenter', function () {
var val = this.innerHTML;
my_input.value = val;
});
это про пункт 4

[Nikolletss]

Денис Инешин: Спасибо, Денис!