单击下面的字段而不是按钮时保存文本输入？

Question

我有一些代码可以将一些文本保存到 Firestore 并且可以工作，但它仅在您键入后单击文本字段时才有效。

这会保存到 Firestore。我已将 getElementById 之后的 ("...") 之间的文本更改为按钮的 id，但这并没有保存任何内容。但是，如果我将它作为文本字段的 id，则在键入后单击文本字段时会保存文本。

document.getElementById("hrtitle").addEventListener("click", function saveHeroTitle() {
        
        const title = document.getElementById('hrtitle').value;
        console.log(title);

        const heroTitleRef = doc(db, "pages", "homePage");

        // something around line 42 vv
        setDoc(heroTitleRef, {
            heroText: title,
        }, {merge: true}).then(function() {
            console.log("Hero Title Saved");
        }).catch(function(error){
        console.log("Error: ", error);
    });
});

文本字段和按钮的代码。

<label for="uetitle">Update Hero Title</label>
<input type="text" id="hrtitle" name="hrtitle">
                      
                      <button class="save-button" id="hrtitleSave" type="submit">Save</button>

如何在单击按钮时获取要保存的文本？

Answer 1

似乎您在获取按钮时使用了错误的 ID。这段代码应该可以工作：

document.getElementById("hrtitleSave").addEventListener("click", function saveHeroTitle() {
    
    const title = document.getElementById('hrtitle').value;
    console.log(title);

    const heroTitleRef = doc(db, "pages", "homePage");

    // something around line 42 vv
    setDoc(heroTitleRef, {
        heroText: title,
    }, {merge: true}).then(function() {
        console.log("Hero Title Saved");
    }).catch(function(error){
    console.log("Error: ", error);
    });
});

__

<label for="uetitle">Update Hero Title</label>
<input type="text" id="hrtitle" name="hrtitle">            
<button class="save-button" id="hrtitleSave" type="submit">Save</button>