Добавлять блок через js?

Question

[Ruslan]

Здравствуйте. Я имею левую колонку:

<div class="task-item">
            	<div class="task-item__name-flex-container">
            		<div class="task-item__name-container">
            			<div class="task-item__name">
            				Купить лошадь
            			</div>

            			<button class="task-item__clear">
            				<img class="task-item__clear-img" src="img/clear-button.png" alt="close">
            			</button>

            			<button class="task-item__open">
            				<img class="task-item__open-img" src="img/arrow.png" alt="open">
            			</button>
            	    </div>
            	</div>

            	<div class="task-item__description">
            		По цене 300 т.р. за штуку
            	</div>
            </div>

И правую колонку c input и textarea:

<div class="right-column">
			<form>
				<h2 class="heading">Добавить новое дело</h2>

				<fieldset class="form-container">
					<p class="task-name__label">
						<label for="task-name__field">* Название</label>
					</p>

					<input id="task-name__field" type="text" name="task-name" required="">

					<p class="task-description__label">
						<label for="task-description__field">* Описание</label>
					</p>

					<textarea id="task-description__field" name="task-description__" required=""></textarea>

					<button class="add-task-button" type="button">Добавить дело</button>
				</fieldset>
			</form>
		</div>

Мне нужно чтобы при нажатии на кнопку, создавался такой-же блок(в правой колонке) но с данными забитыми в input. То есть текст вбитый в название (.task-name__field) был там где Купить лошадь (.task-item__name), а текст вбитый в описание(.task-description__field) был вместо "По цене 300 т.р. за штуку"(.task-item__description). Подскажите?)

p.s. дз по курсам js, только начал изучение. Проштудировал интернет, не понял как правильно задать

Comments

[WapSter]

Проштудировал интернет, не понял как правильно задать

печально тебе придется.

[Ruslan]

WapSter, Спасибо.

[WapSter]

Lorelin, .textContent .innerHTML штудируй дальше) Еще можно добавить туда .cloneNode

[Ruslan]

WapSter, Если честно, не совсем понял как это работает. У меня Изначально блок для примера(слева) скрыт, первая функция в js делать блок, при нажатии на кнопку, видимым. Как после этого еще дописать чтобы там менялась информация? Сразу признаю, да. Мне печально. Но изучаю я js первые пол дня, может и меньше

[WapSter]

Lorelin, обновил ответ дал пример отвечающий на

Как после этого еще дописать чтобы там менялась информация?

Answer 1

[WapSter]

Нашел тебе статью, которая поможет со вставкой блока. А вот эта статья поможет с прочтением значений в input. Небольшой пример

Comments

[Ruslan]

Спасибо за помощь)

[Ruslan]

Извиняюсь, что отнимаю кучу времени, но все равно не могу понять как нужно сделать.. Вот мой код(https://codepen.io/Lorelin/pen/RwPeQVG ), все, что я написал в js это

$(function(){
	$('.add-task-button').click(function(){
		$('.empty-list').remove();
		$('.task-item').show();
	});

});

Как все реализовать не понимаю. Еще раз извини

[WapSter]

Lorelin, мне то не сложно написать, но вот я очень сомневаюсь, что поймешь, так как нужно знать события, локальные/глобальные переменные, различные методы, к тому же на нативном js, а не jquery.

[Ruslan]

WapSter, Я очень постараюсь) Просто все, что я прошел по js это можно сказать то, что я и написал. А задание - Сверстать страницу, изображенную на макетах, и сделать так, чтобы она работала: чтобы можно было добавлять новые дела в список и удалять их. Сворачивание пока не реализовывать (следующий урок).

Может быть я конечно его не правильно понял и сделал то, что требуется. Но мне кажется, что нет. По примеру (если он будет), может хоть понятнее будет разобраться. Я прочитал несколько раз статьи, но до конца все равно не понял.

spoiler

[WapSter]

Ruslan, скинь zip завтра посмотрю. И что это за уроки такие, если без основ todo list писать нужно? Больше похоже на задание при устройстве) Предупреждаю просто показать не прокатит)

[Ruslan]

WapSter, https://yadi.sk/d/GQWRCcMPaEZd_g

[WapSter]

Ruslan, не открывается( Мда тебе похоже еще нужно пройти обучение использования компьютера)

[Ruslan]

WapSter, Почему? Я проверил в других браузерах - все открывает

[WapSter]

Ruslan, я про архив говорю

[Ruslan]

WapSter, Странно. У меня все норм. Перезалил https://yadi.sk/d/08EZAFxfqWf-MQ

[WapSter]

Ruslan, mac не умеет открывать rar точнее умеет, но мне лень заморачиваться, так как все и так в zipe или на гитхабе или в npm) Сжатие по слабее ставь.

[Ruslan]

WapSter, Тогда так) https://drive.google.com/drive/folders/1GAI6si15Jt...

[WapSter]

Ruslan, там у тебя 2 картинки есть img/clear-button.png в html в файлах их нет? ты точно все прислал?

[Ruslan]

WapSter, Да, забыл папку img, но от они и не нужны по идее, то что с ними связано будет проходить в дальнейшем. Задача сейчас только в добавлении блоков, картинки для вида

[WapSter]

Ruslan, https://dropmefiles.com/IyQLu держи, не то что ты прям хотел но большая часть функционала удачи)

[Ruslan]

WapSter, спасибо огромное. Надеюсь я не сильно тебя достал , но как ты и сам понял, у меня все печально ) но я обязательно выучусь и в будущем позову тебя в свою компанию