我对HTML和JavaScript非常陌生，所以我确信这是我犯了一些很基本的错误。然而，我有一个非常基本的单页网站设置，从Firebase RTDB获取数据以显示某些信息，并能够从表单提交中将数据发布到数据库。当网页加载时，我用从数据库接收的一些JSON数据填充一个列表，
然而，当我从列表中选择一个项目，然后将数据发布到数据库时，列表中的所有项目都会再次添加。
这似乎只会发生在有时候，而不是每次，我很难让bug始终激活，有时它会在每次发送数据时添加项目，而其他时候只添加几次。
以下是我的一些HTML：
</head>
<body onload="populateDropdown()">
<h1 style="background-color:DodgerBlue;
text-align: center;
font-size: 60px;
text-shadow: 0cqmax;
color: coral;"
>SunSync</h1>
<form action="#">
<label for="sel">Choose a Dispenser</label>
<select id="sel">
<option value="">Dispensers </option>
</select>
<input type="submit" value="Choose" onclick="displayData(document.getElementById('sel'))" />
</form>
<div id="deviceInfo" style="display: none;">
<P>Dispenser: <span id="reading-dispenserName"></span></P>
<P>Dispenser Location: <span id="reading-cityName"></span></P>
<p>Uv Index: <span id="reading-uvindex"></span></p>
<p>Weather: <span id="reading-weather"></span></p>
<p>Danger: <span id="reading-category"></span></p>
<p>Time Above 3: <span id="reading-timeabove"></span></p>
<form id="messageToSend" action="#">
<label for="message">Message:</label><br>
<input type="text" id='message' name="message"><br>
<input type="button" value="Submit" onclick="sendMessage(document.getElementById('message').value)">
</form>
</div>
</body>字符串
下面是我的一些JavaScript函数：
function populateDropdown(){
//This gets the dispenser list
//document.getElementById("sel").options.length=0;
let i = 0;
databaseCityList.on('value', (snapshot) => {
cityList = snapshot.val();
console.log(cityList);
var items = [];
items = cityList;
const obj = JSON.stringify(cityList);
const list = JSON.parse(obj);
console.log(list);
var cityListOfLists = [];
//This sorts the data into an array for sorting
var sel = document.getElementById('sel')
for(items in list){
console.log(items);
cityListOfLists.push(items);
i++;
console.log(i);
}
console.log(cityListOfLists);
//This cycles through the list and appends the various dispenser names into the dropdown list
let p = 0;
for (items in cityListOfLists){
var opt = document.createElement('option');
opt.innerHTML = cityListOfLists[p];
opt.value = cityListOfLists[p];
sel.appendChild(opt);
console.log(cityListOfLists[p]);
p++;
}
//Reset variables otherwise dropwdown grows after message send? --didnt work - worked once?
i = 0;
p = 0;
//Error handling
document.getElementById("reading-citylist").innerHTML = list.Victoria;
}, (errorObject) => {
console.log('The read failed: ' + errorObject.name);
});
}
function sendMessage(){
//This sends a message to the desired path -- Sending a message doubles the dropdown?
var device1 = document.getElementById("sel").value;
var messagePath = "/Dispensers/"
messagePath += device1;
messagePath += "/message/";
database.ref(messagePath).set(document.getElementById('message').value, function(error) {
if (error) {
// The write failed...
console.log("Failed with error: " + error)
} else {
// The write was successful...
console.log("success")
console.log(document.getElementById('message').value)
}
})}型
到目前为止，我已经调整了我能想到的一切，比如在populateDropdown函数的顶部添加一些代码来完全删除我的所有项目，但这个错误仍然存在。就像我说的，我对这个非常陌生，所以任何帮助都会非常感激。
1条答案
按热度按时间piwo6bdm1#
一旦你收到了填充数据包的数据，你应该用on（）方法调用off（）方法来删除监听器集。
以下是删除侦听器的文档：https://firebase.google.com/docs/database/web/read-and-write#detach_listeners