Всем привет!
Хочу написать простую вещь - что бы когда пользователь отправлял форму, все значения из инпутов выводились на странице в таблице. Для этого из инпутов я собираю объект и кладу его в массив. После этого прохожусь циклом по массиву, что бы получить все элементы массива (в моем случае это объекты), и для каждого объекта прохожусь следующим циклом по всем его свойствам. И где то здесь происходит что то непонятное для меня. Каждый раз после того как запускается этот цикл в цикле, он возвращает все элементы с первого по последний. Т.е. это выглядит так:
- Цикл 1: 1
- Цикл 2: 1,2
- Цикл 2: 1,2,3
- ...
Из-за этого ломается вся моя таблица, т.к. код добавляет все эти значения в одну строку, а не в следующую строку.
Вот мой код:
const modelElem = document.getElementById('model-input');
const priceElem = document.getElementById('price-input');
const benefitElem = document.getElementById('benefit-input');
const calcBtnElem = document.getElementById('calc-btn');
let cars = [];
let carId = 0;
// Сборка таблицы из массива
function createDataTable() {
let dataTable = document.getElementById('data-table');
let tBody = document.getElementById('tbody');
let row = document.createElement("tr");
let cell = document.createElement("td");
for (let i = 0; i < cars.length; i++) {
// console.log(cars[i].model);
for (let key in cars[i]) {
let cell = document.createElement("td");
cell.innerHTML = cars[i][key];
// console.log(key + " " + cars[i][key]);
row.appendChild(cell);
}
tBody.appendChild(row);
}
}
// Создание объекта модели
function CarData(model, price, benefit) {
carId++;
let halfPrice = String(half(price));
if (benefit === "") {
benefit = "–"
benefitPrice = price;
} else {
benefitPrice = String(price - benefit);
}
// Порядок создания значений важен для таблицы на фронте!
this.carId = carId;
this.model = model;
this.price = price;
this.halfPrice = halfPrice;
this.benefit = benefit;
this.benefitPrice = benefitPrice;
}
// Получаем половину числа
function half(number) {
return number / 2;
}
// Функция проверки инпутов и оповещения
function checkRequired() {
let fieldRequerdElem = document.querySelectorAll('.field-alert');
if (modelElem.value == "" && priceElem.value == "") {
alert('Вы не заполнили поле ' + 'Model' + ' и ' + 'Price');
} else if (modelElem.value == "") {
alert('Вы не заполнили поле ' + 'Model');
} else if (priceElem.value == "") {
alert('Вы не заполнили поле ' + 'Price');
} else {
return true;
}
}
// Отправляем форму
calcBtnElem.addEventListener('click', (ev) => {
ev.preventDefault(); // Отменяем стандартное поведение кнопки
// Проверка на заполненность инпутов
if (checkRequired()) {
let model = modelElem.value.trim();
let price = priceElem.value.trim();
let benefit = benefitElem.value.trim();
let car = new CarData(model, price, benefit); // Создаем объект
cars.push(car); // Добавляем Объект в массив
createDataTable();
document.querySelector('form').reset(); // Чистим форму после
}
});
А вот он же в песочнице, что бы можно было воспроизвести ошибку: https://jsfiddle.net/yastaraus/8g52ma0v/16/. Нужно отправить несколько раз форму что бы увидеть в чем проблема.
Можете пожалуйста объяснить, что я упускаю и почему не выходит? Нужно что бы при каждом нажатии кнопки добавлялась новая строка со свежими данными. Может быть есть другой, более простой способ сделать то, что я хочу? С радостью почитаю любые адекватные советы. Спасибо.