如何调整代码实现点击按钮保存文本到Firestore，而非点击文本框触发？

调整后的JS代码 #

把原事件绑定逻辑替换为以下代码即可：

document.getElementById("hrtitleSave").addEventListener("click", function saveHeroTitle(e) {
    // 阻止submit按钮默认的表单提交刷新行为
    e.preventDefault();
        
    const title = document.getElementById('hrtitle').value;
    console.log(title);

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

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

核心说明 #

• 之前绑定按钮不生效的核心原因是你使用的按钮type为submit，如果按钮在<form>标签内部，点击后会默认触发表单提交、刷新页面，异步保存逻辑还没执行完成页面就被刷新，看起来就像没有触发保存操作，添加e.preventDefault()就是为了禁用这个默认行为。
• 事件绑定对象改为按钮IDhrtitleSave，文本取值逻辑不需要修改，仍然从hrtitle文本框读取输入内容。

可选排查项 #

如果修改后仍然无法触发，可以检查两个点：

• 确认JS代码在DOM元素加载完成后执行，避免getElementById无法获取到按钮元素导致绑定失败，可以把JS代码放在页面</body>标签之前，或者包裹在DOMContentLoaded事件回调中。
• 打开浏览器控制台查看是否有报错，比如Firestore实例db是否正确初始化、数据库权限是否允许写入。

内容的提问来源于stack exchange，提问作者Brady