每次将数据添加到防火墙中时，数据条目的数量就会增加。

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>

我是这样做的，所以用户首先从列表中选择on选项，然后使用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时，都要向submit按钮添加一个新的事件侦听器。

因此，当您第一次调用

• 时，您可以添加第一个侦听器，所以当用户单击提交按钮时，它会添加一个文档。
• 下次调用addElementApparat时，添加第二个侦听器。因此，当用户单击submit按钮时，同一个侦听器将被调用两次，并添加了两个文档。

可能的解决办法是：

• 只添加侦听器一次。
• 在不再需要侦听器时删除它。

当前代码中最简单的更改是，一旦用户单击submit按钮，就会删除侦听器。其中一个例子是：

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();
    });  
  });
};

更简单的方法是使用option元素的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) {检查表单中的集合名称是否有效。