@chatterbox777

Добавляются предыдущие записи state при отправке форма, почему так?

UPD: Изменил код и добавил ссылку на видео проблемы.... ПРОШУ ПОМОГИТЕ)) уже полностью изменил логику скрипта и опять такая же хрень ( правда я сделал нормальное добавление объектов в хранилище )

Видео ссылка

Приветствую, в принципе суть вопроса заключена в названии вопроса , два раза добавляется пользователь в таблицу... я так понимаю потому что я в textToState функции добавил addEventListener который добавляется херову тучу раз , получается зазря и мешает логики... а я не могу тогда догнать, как этот момент обыграть.... ну вот вообще голова взрывается и не понимаю... отладчик тут не поможет , нужно только архитектурно понимать как прокидывать .... я не понимаю.... меня уже бесит это программирование... занимаюсь уже год, но ничего не получается... просто уже горит господа.... очень хочется, вроде нравится , но не получается ..... спасибо за помощь...

index.html
<!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>


сам код index.js
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();
  • Вопрос задан
  • 34 просмотра
Решения вопроса 1
Stalker_RED
@Stalker_RED
Потому что ты не очищаешь предыдущие записи и выводишь их все. Нужно или очищать массив или выводить только последнюю.

Ты вставляешь мышкой потому что цифры на клавиатуре выломаны, и как и ctrl+v? Видео снято телефоном, потому что о софте с захватом экрана ты даже не слыхал?
Возможно стоит поискать хобби попроще.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы