Количество вводимых данных увеличивается с каждым разом, когда я добавляю данные в firestore

Question

В настоящее время я создал код для добавления данных в свою базу данных пожарного депо, который, по моему мнению, работал хорошо, пока я не протестировал его сегодня. Я сделал модальное добавление данных, и каждый раз, когда я добавляю новый элемент, количество добавляемых данных увеличивается. Таким образом, в первый раз он добавляется только один раз, но элемент после этого добавляется дважды и так далее. Я относительно новичок в Firebase и js, поэтому я не могу понять, что не так. Вот мой код:

Это модал, который у меня есть для ввода:

      <div id="modal-add" class="modal">
        <div class="modal-content">
          <h4> Legg til elementer </h4><br />
          <form id="add-form">
            <div style="display: flex; flex-direction: row; margin-bottom: 10px;"> <!-- valg av apparat -->
              <label for="apparat" style="margin: 10px 10px 0 0 ;"> Velg Apparat: </label>
              <select style="display:block; width:auto;" id="apparatusAdd" onchange="addElementApparat()" required>
                <option> </option>
                <option value="Frittstående"> Frittstående </option>
                <option value="Bøyle"> Bøyle </option>
                <option value="Ringer"> Ringer </option>
                <option value="Hopp"> Hopp </option>
                <option value="Skranke"> Skranke  </option>
                <option value="Svingstang"> Svingstang </option>
              </select>
            </div>
            <div class="input-field">
              <input type="text" id="add-navn" required />
              <label for="add-navn"> Navn </label>
            </div>
            <div class="input-field">
              <input type="text" id="add-verdi" required />
              <label for="add-verdi"> Verdi </label>
            </div>
            <button class="btn yellow darken-2 z-depth-0"> Legg til </button>
            <button class="btn-small red" onclick="lukkModal()"> Lukk </button>
          </form>
        </div>
      </div>

Я сделал это так, чтобы пользователь сначала выбирал опцию из списка, а затем использовал оператор if добавить предмет в нужную коллекцию в Firestore. Это мой js:

function addElementApparat() {
  var x = document.getElementById('apparatusAdd').value;
  console.log(x);
  const addElement = document.querySelector('#add-form');

  if (x === 'Frittstående') { // legger til elementer i FX
    console.log("ADD FX");
    addElement.addEventListener('submit', (e) => {
      e.preventDefault();
      db.collection('Apparater').doc('FX').collection('elementer').add({
        navn: addElement['add-navn'].value,
        verdi: addElement['add-verdi'].value
      }).then(() => {  // lukker ikke modalen slik at det skal være lettere å legge til flere uten å gå ut og inn
        console.log('element successfully added');
        addElement.reset();
      });  
    });
  } else if (x === 'Bøyle') { // legger til elementer i PH
    console.log("ADD PH");
    addElement.addEventListener('submit', (e) => {
      e.preventDefault();
      db.collection('Apparater').doc('PH').collection('elementer').add({
        navn: addElement['add-navn'].value,
        verdi: addElement['add-verdi'].value
      }).then(() => { // lukker ikke modalen slik at det skal være lettere å legge til flere uten å gå ut og inn
        console.log('element successfully added');
        addElement.reset();
      });  
    });
  } else if (x === 'Ringer') { // legger til elementer i SR
      console.log("ADD SR");
      addElement.addEventListener('submit', (e) => {
        e.preventDefault();
        db.collection('Apparater').doc('SR').collection('elementer').add({
          navn: addElement['add-navn'].value,
          verdi: addElement['add-verdi'].value
        }).then(() => { // lukker ikke modalen slik at det skal være lettere å legge til flere uten å gå ut og inn
          console.log('element successfully added');
          addElement.reset();
        });  
      });
  } else if (x === 'Hopp') { // legger til elementer i VT
    console.log("ADD VT");
    addElement.addEventListener('submit', (e) => {
      e.preventDefault();
      db.collection('Apparater').doc('VT').collection('elementer').add({
        navn: addElement['add-navn'].value,
        verdi: addElement['add-verdi'].value
      }).then(() => { // lukker ikke modalen slik at det skal være lettere å legge til flere uten å gå ut og inn
        console.log('element successfully added');
        addElement.reset();
      });  
    });
  } else if (x === 'Skranke') {
    console.log("ADD PB");
    addElement.addEventListener('submit', (e) => {
      e.preventDefault();
      db.collection('Apparater').doc('PB').collection('elementer').add({
        navn: addElement['add-navn'].value,
        verdi: addElement['add-verdi'].value
      }).then(() => { // lukker ikke modalen slik at det skal være lettere å legge til flere uten å gå ut og inn
        console.log('element successfully added');
        addElement.reset();
      });  
    });
  } else if (x === 'Svingstang')  {
    console.log("ADD HB");
    addElement.addEventListener('submit', (e) => {
      e.preventDefault();
      db.collection('Apparater').doc('HB').collection('elementer').add({
        navn: addElement['add-navn'].value,
        verdi: addElement['add-verdi'].value
      }).then(() => { // lukker ikke modalen slik at det skal være lettere å legge til flere uten å gå ut og inn
        console.log('element successfully added');
        addElement.reset();
      });  
    });
  } else {
    console.log("Prøv på nytt");
  }
};
function lukkModal() { // knapp som lukker modalen man legger til elementer
  const modal = document.querySelector('#modal-add');
  M.Modal.getInstance(modal).close();    
}

Я знаю, что мой код не самый эффективный, но, опять же, я относительно новичок в этом, и я был бы очень признателен, если бы кто-то мог помочь мне понять это. И мне жаль, если это слишком долго. Спасибо

Answer 1

Вы добавляете новый прослушиватель событий на кнопку отправки каждый раз, когда вызываете addElementApparat.

• Итак, при первом вызове addElementApparat вы добавляете первого слушателя, поэтому, когда пользователь нажимает кнопку отправки, он добавляет один документ.
• При следующем вызове позвоните addElementApparat, вы добавите второго слушателя. Поэтому, когда пользователь нажимает кнопку отправки, один и тот же слушатель вызывается дважды, и добавляются два документа.

Возможные решения:

• Либо только добавить прослушиватель один раз.
• Удалите слушателя, когда он больше не нужен.

Самое простое изменение в вашем текущем коде - удалить слушателя, как только пользователь нажал кнопку отправки. Пример для одного из них:

let listener = addElement.addEventListener('submit', (e) => {
  e.preventDefault();
  addElement.removeListener('submit', listener);
  db.collection('Apparater').doc('FX').collection('elementer').add({
    navn: addElement['add-navn'].value,
    verdi: addElement['add-verdi'].value
  }).then(() => {  // lukker ikke modalen slik at det skal være lettere å legge til flere uten å gå ut og inn
    console.log('element successfully added');
    addElement.reset();
  });
})

В вашем текущем коде вам нужно будет повторить это для каждого if.

---

Но я настоятельно рекомендую объединить все слушатели вместе, так как они, кажется, различаются только в незначительных деталях.

function addElementApparat() {
  var x = document.getElementById('apparatusAdd').value;
  const addElement = document.querySelector('#add-form');

  var collectionName;

  if (x === 'Frittstående') { // legger til elementer i FX
    collectionName = "FX";
  } else if (x === 'Bøyle') { // legger til elementer i PH
    collectionName = "PH";
  } else if (x === 'Ringer') { // legger til elementer i SR
    collectionName = "SR";
  } else if (x === 'Hopp') { // legger til elementer i VT
    collectionName = "VT";
  } else if (x === 'Skranke') {
    collectionName = "PB";
  } else if (x === 'Svingstang')  {
    collectionName = "HB";
  } else {
    console.log("Prøv på nytt");
    return;
  }
  addElement.addEventListener('submit', (e) => {
    e.preventDefault();
    db.collection('Apparater').doc(collectionName).collection('elementer').add({
      navn: addElement['add-navn'].value,
      verdi: addElement['add-verdi'].value
    }).then(() => {
      console.log('element successfully added');
      addElement.reset();
    });  
  });
};

---

Еще проще использовать атрибут value ваших option элементов для хранения имени коллекции:

<option value="FX"> Frittstående </option>
<option value="PH"> Bøyle </option>
<option value="SR"> Ringer </option>
<option value="VT"> Hopp </option>
<option value="PB"> Skranke  </option>
<option value="HB"> Svingstang </option>

Теперь вся ваша функция addElementApparat может стать:

function addElementApparat() {
  var collectionName = document.getElementById('apparatusAdd').value;
  const addElement = document.querySelector('#add-form');

  if (["FX", "PH", "SR", "VT", "PB", "HB"].indexOf(collectionName) >= 0) {
    addElement.addEventListener('submit', (e) => {
      e.preventDefault();
      db.collection('Apparater').doc(collectionName).collection('elementer').add({
        navn: addElement['add-navn'].value,
        verdi: addElement['add-verdi'].value
      }).then(() => {
        console.log('element successfully added');
        addElement.reset();
      });  
    });
  } else {
    console.log("Prøv på nytt");
  }
};

if (["FX", "PH", "SR", "VT", "PB", "HB"].indexOf(collectionName) >= 0) { проверяет, является ли имя коллекции из формы действительным.