Question

我有一个简单的输入表单：

<body>
    <div class="jumbotron">
    <div class="placeholder"></div>
    </div>
    <div class="container">
            <h2>Add a new Animal</h2>
    <form class="form-group" id="add-animals">
    Species: <input type="text" id="species" class="form-control">
    Name: <input type="text" id="name" class="form-control" >
    Age: <input type="text" id="age" class="form-control">
    Last Fed: <input type="date" id="last-fed" class="form-control">
    Last Shed: <input type="date" id="last-shed" class="form-control">
    Diet: <input type="text" id="diet" class="form-control">
    Basking area temperature: <input type="text" id="basking-area-temperature" class="form-control">
    Cold part temperature: <input type="text" id="cold-temperature" class="form-control">
    Humidity: <input type="text" id="humidity" class="form-control">
    Addition Info: <textarea class="form-control" id="additional-info"></textarea>
    <button id="btnCreate" class="btn btn-primary">Create</button>
    </form>
    <h3>View Current Animals</h3>
    <ol id="animal-list">

    </ol>
    </div>
    </div>
    <script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBSuC8nqJzLe7d5jKS-_nE15kaI9Y6NIfI",
    authDomain: "repti-care-32176.firebaseapp.com",
    databaseURL: "https://repti-care-32176.firebaseio.com",
    projectId: "repti-care-32176",
    storageBucket: "repti-care-32176.appspot.com",
    messagingSenderId: "632910932105"
  };
  firebase.initializeApp(config);
  const db = firebase.firestore();
  db.settings({ timestampsInSnapshots: true }); 
</script>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>

    <script src="./scripts/main.js"></script>
</body>

提交表单后，我想向数据库中添加新条目，这是我的js：

const animalList = document.querySelector('#animal-list');
const form = document.querySelector('#add-animals');


function renderAnimals(doc) {
let li = document.createElement('li');
let name = document.createElement('div');
let species = document.createElement('div');
let age = document.createElement('div');
let last_fed = document.createElement('div');
let last_shed = document.createElement('div');
let diet = document.createElement('div');
let basking_area_temp = document.createElement('div');
let cold_part_temp = document.createElement('div');
let humidity = document.createElement('div');
let additional_info = document.createElement('div');

li.setAttribute('data-id', doc.id);
name.textContent = `name: ${doc.data().name}`
species.textContent = `species: ${doc.data().species}`
age.textContent = `age: ${doc.data().age}`
last_fed.textContent = `last fed: ${doc.data().last_fed}`;
last_shed.textContent = `last shed: ${doc.data().last_shed}`;
diet.textContent = `diet: ${doc.data().diet}`;
basking_area_temp.textContent =`basking area temp: ${ doc.data().basking_area_temp}`;
cold_part_temp.textContent =  `cold part temp: ${doc.data().cold_part_temp}`;
humidity.textContent = `humidity: ${doc.data().humidity}`;
additional_info.textContent = `additional info: ${doc.data().additional_info}`;

li.appendChild(species);
li.append(name);
li.append(age);
li.append(last_fed);
li.append(last_shed);
li.append(diet);
li.append(basking_area_temp);
li.append(cold_part_temp);
li.append(humidity);
li.append(additional_info);

animalList.appendChild(li);
}

// getting data from the back end
db.collection('animals').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
    renderAnimals(doc);
  })
})

// adding data
form.addEventListener('submit', (event) => {
    event.preventDefault();
    db.collection('animals').add({
        species: form.species.value,
        name: form.name.value,
        age: form.age.value,
        last_fed: form.last_fed.value,
        last_shed: form.last_shed.value,
        diet: form.diet.value,
        basking_area_temp: form.basking_area_temp.value,
        cold_part_temp: form.cold_part_temp.value,
        humidity: form.humidity.value,
        additional_info: form.additional_info.value

    })
})

当前，当我将信息添加到表单字段时，它会引发错误：

无法读取未定义的属性“值” 在HTMLFormElement.form.addEventListener（main.js：58）

为什么我的last_fed对象属性未定义，如何解决这个问题，以便将数据发布到数据库？出于某些原因，只有其中带有“ _”符号的变量才有问题，如果我删除它们，一切都会很好

Answer 1

您正在像这样初始化form：

const form = document.querySelector('#add-animals');

然后在提交处理程序中执行以下操作：

species: form.species.value

form.species没有指向任何内容。 DOM中没有任何内容可让您按这样的ID查找表单中的字段。

您需要使用查询选择器从HTML查找每个字段。所以对于这一行：

species: document.querySelector("species").value

请注意，一旦在代码中放置一个断点并引发错误，并用断点击中该断点，这种类型的问题就很容易解决。从那里，您可以检查form变量，看看它没有species属性。

使用表单将数据发布到Firebase

1 个答案: