<!DOCTYPE html>
<html lang="en">
<head>
<link href="../../sources/css/style.css" rel="stylesheet">
<title>123</title>
</head>
<body>
<div class="container">
<button class="table__button__popbox__on">ввести данные</button>
<div class="table">
<div class="table__navbar">
<div class="table__navbar__cell" id="lastname">Фамилия</div>
<div class="table__navbar__cell" id="name">Имя</div>
<div class="table__navbar__cell" id="patronymic">Отчество</div>
<div class="table__navbar__cell" id="birthdate">Дата рождения</div>
<div class="table__navbar__cell" id="birthplace">Место рождения</div>
<div class="table__navbar__cell" id="mail">Почта</div>
<div class="table__navbar__cell" id="phoneNumber">номер телефона</div>
<div class="table__navbar__cell" id="registrationDate">дата регистрации</div>
<div class="table__navbar__cell" id="lastSeen">последнее посещение сайта</div>
</div>
</div>
</div>
<div class="popbox unvisible">
<button class="popbox__close">X</button>
<form class="popbox__form" id="userForm" action="http://foo.com" method="post">
<input type="text" name="lastname" placeholder="введите Фамилию">
<input type="text" name="name" placeholder="введите ваше имя">
<input type="text" name="patronymic" placeholder="введите Отчество">
<input type="text" name="birthdate" placeholder="введите Дату рождения">
<input type="text" name="birthplace" placeholder="введите Место рождения">
<input type="text" name="mail" placeholder="введите Почту">
<input type="text" name="phoneNumber" placeholder="введите Номер телефона">
<input class="popbox__submit" type="submit">
</form>
</div>
<script src="../../js/index.js"></script>
</body>
</html>
</html></spoiler>const popboxBtn = document.querySelector(".table__button__popbox__on");
const popboxBlock = document.querySelector(".popbox");
const popboxClose = document.querySelector(".popbox__close");
const inputName = document.getElementsByName("name");
const form = document.querySelector("#userForm");
const inputs = document.querySelectorAll("input");
const submitForm = document.querySelector("#userForm");
const inputsArr = Array.from(inputs);
const tableCells = document.querySelectorAll(".table__navbar__cell");
let state = {
form: [],
};
let objOfInputsValue = {};
// остановился на том, что нужно размэпить массив state.form и добавить
// каждому столбцу свое значение из ключа объекта в массиве state.form
const clearInputs = () => {
inputs.forEach((el, index) => {
if (el.className !== "popbox__submit") {
el.value = "";
}
});
};
function addIdtoElement() {
if (state.form.length > 0) {
state.form.map((el, index) => {
el.id = index;
});
}
}
function addElementToTableCell() {
state.form.map((el, index) => {
for (key in el) {
if (key !== "id") {
let tableCell = document.querySelector(`#${key}`);
let pCell = document.createElement("p");
pCell.textContent = el[key];
tableCell.appendChild(pCell);
}
}
});
}
function listenersInit() {
console.log(inputName);
console.log(inputs);
console.log(inputsArr);
popboxBtn.addEventListener("click", (e) => {
e.preventDefault();
popboxBlock.classList.remove("unvisible");
console.log("ты включил форму");
});
popboxClose.addEventListener("click", (e) => {
e.preventDefault();
popboxBlock.classList.add("unvisible");
console.log("ты выключил форму");
});
inputsArr.forEach((el, index) => {
console.log(el);
el.addEventListener("focus", (e) => {
e.currentTarget.addEventListener("change", (e) => {
console.log(e);
objOfInputsValue[e.currentTarget.name] = e.currentTarget.value;
console.log(objOfInputsValue);
});
});
});
submitForm.addEventListener("submit", (e) => {
e.preventDefault();
if (Object.keys(objOfInputsValue).length > 0) {
state.form.push(objOfInputsValue);
objOfInputsValue = {};
clearInputs();
console.log(objOfInputsValue);
console.log(state);
addIdtoElement();
console.log(state);
addElementToTableCell();
}
});
if (state.form.length > 0) {
let tableCellsArr = Array.from(tableCells);
tableCellsArr.forEach((el, index) => {
console.log(el);
});
}
// form.addEventListener("submit", async (e) => {
// e.preventDefault();
// console.log(form);
// console.log(new FormData(form));
// let response = await fetch("/article/formdata/post/user-avatar", {
// method: "POST",
// body: new FormData(form),
// });
// let result = await response.json();
// alert(result.message);
// });
}
function init() {
listenersInit();
}
window.onload = init();
два раза добавляется пользователь в таблицу...Во первых - где таблица? Или у вас див с классом table таблица? или на бэкенде у вас в бд таблица (тогда где код бэкенда)? Можно нормально объяснять что у вас происходит?
потому что я в textToState функции добавил addEventListener который добавляется херову тучу разВообще не понятно зачем вы его там добавляете, у вас же есть евент на форме, почему прям его и не использовать? В идеале с бэкенда получать ответ с нужными полями и только тогда что-то добавлять в "таблицу" (если речь о диве).
меня уже бесит это программирование... занимаюсь уже год, но ничего не получается...Бывает. Либо у вас изначально не было предрасположенности к логически последовательному мышлению (что маловероятно, за год вы бы уже свихнулись), либо еще не поняли главного - код вторичен. Важно выстроить алгоритм работы, посмотреть на него, подумать что можно сделать лучше и не полениться попробовать поменять. В данном случае нужно понять какие действия в каком порядке должны выполняться. У вас порядок имхо неверный.
Средний