Всем доброго времени!
Суть: по нажатию "добавить" добавляются поля ввода, а при нажатии "создать план" вводимая информация должна выводится ниже. Замучался уже, с одной строчкой всё просто, а дальше не понимаю, дата одна, а вот остальные поля меняются, значит наверно нужно создавать массивы и в них помещать значения, но только не понимаю как их потом обходить и доставать все эти значения, чтобы ещё выводилось по порядку, что-то пытался поковырять циклом, но на выходе были кучи запятых.
<!DOCTYPE html>
<html>
<head>
<title>Training plan v2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<form id="daily" method="get">
<h1>Дневник тренировок</h1>
<label>
Дата тренировки:
<input type="date" class="information" id="date">
</label>
<div class="exblock">
<input type="text" class="information" id="exercise" placeholder="Упражнение">
<input type="number" class="information" id="sets" placeholder="Подходы">
<input type="number" class="information" id="reps" placeholder="Повторения">
<input type="button" class="buttons" id="DelElem" value="Удалить">
</div>
<input type="button" class="buttons" id="AddElem" value="Добавить">
<br>
<input type="button" id="makeplan" value="Создать план">
</form>
<hr>
</body>
<script src="index.js"></script>
</html>
function getInfo() {
let inputValues = document.querySelectorAll('.information');
let trainingDay = {};
trainingDay.date = document.querySelector('#date').value;
trainingDay.exercise = [];
trainingDay.sets = [];
trainingDay.reps = [];
trainingDay.exercise = document.querySelectorAll('#exercise');
trainingDay.sets = document.querySelectorAll('#sets');
trainingDay.reps = document.querySelectorAll('#reps');
console.log(trainingDay);
return trainingDay;
}
function addExercise() {
let parent = document.querySelector('#daily');
let element = parent.querySelector('.exblock');
let clone = element.cloneNode(true);
parent.insertBefore(clone, parent.children[3]);
}
function createPlan(info) {
let newday = document.createElement('div');
let parent = document.querySelector('body');
newday.innerHTML = info['date'] + " Упражнение: " + info['exercise'] +
'. Подходов: ' + info['sets'] + '. Повторений: ' + info['reps'];
parent.appendChild(newday);
}
document.querySelector('#AddElem').addEventListener('click', addExercise);
document.querySelector('#makeplan').addEventListener('click', function () {
let info = getInfo();
createPlan(info);
});
