仅执行第一行功能

Question

我有一个函数，当我提交表单时会被调用。根据变量的值，然后调用两个函数之一来更新我的Firebase Firestore。我遇到的问题是，仅对其他两个潜在函数中的每一个执行第一行（console.log（））。我的控制台没有显示任何错误。

提交表单时会调用此

function setSpeakerInfo() {
    var nameField = document.getElementById("name");
    var nameValue = nameField.value.trim();
    if (nameValue) {
        nameField.dataset.state = 'valid';
    } else {
        nameField.dataset.state = 'invalid';
    }

    if (nameField.dataset.state == 'valid') {
        if (docId != null) {
            updateSpeaker();
        } else {
            createNewSpeaker();
        }
    } else {
        alert("You must provide a name!");
    }
}

这是另外两个要调用的函数，具体取决于docId是否为null。

function updateSpeaker() {
    console.log("UPDATE");
    var docRef = db.collection("/annual meeting/speakers/Speakers").doc(docId);
    return docRef.update({
        Name: document.getElementById("name").value,
        Title: document.getElementById("title").value,
        Bio: document.getElementById("bio").value
    })
    .then(function() {
        console.log("Document successfully updated!");
    })
    .catch(function(error) {
        console.error("Error writing document: ", error);
    });
}

function createNewSpeaker() {
    console.log("CREATE");
    db.collection("/annual meeting/speakers/Speakers").add({
        Name: document.getElementById("name").value,
        Title: document.getElementById("title").value,
        Bio: document.getElementById("bio").value,
        Image: ""
    })
    .then(function(docRef) {
        console.log("Document written with ID: ", docRef.id);
    })
    .catch(function(error) {
        console.error("Error adding document: ", error);
    });
}

编辑：根据要求，这是我的表格。

<form id="speakerInfo" onsubmit="setSpeakerInfo()">
    <input id="name" type="text" placeholder="Name"><br><br>
    <input id="title" type="text" placeholder="Title"><br>
    <h3>Bio</h3>
    <textarea id="bio" rows="10" cols="40"></textarea><br><br>
    <h3>Image</h3>
    <input id="image" type="file" accept="image/"><br>
    <img id="profileImage" width="25%" height="25%"></img><br><br>
    <input id="submit" type="submit" value="Submit">
</form>

这是我的控制台。

Answer 1

我弄清楚了问题所在。在Firebase异步方法完成之前，正在重新加载表单。