每次我向firestore添加数据时，数据条目的数量都会增加

Question

我目前已经编写了一个代码，将数据添加到我的firestore数据库中，我认为它运行良好，直到今天进行了测试。我制作了一个添加数据的模式，每次添加一个新项目时，添加的次数都会增加。所以第一次只添加了一次，但之后的项目添加了两次，以此类推。我对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时，都会向提交按钮添加一个新的事件侦听器。

• 所以第一次调用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();
});  
});
};

---

更简单的是使用option元素的value属性来存储集合名称：

<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) {检查表单中的集合名称是否有效。