I have some code that saves some text to Firestore and works but it only works when you click the text field after typing.
This saves to Firestore. I have changed the text between ("...") after getElementById to the id of the button but that does not save anything. But if I have it as the id of the text field the text is saved when clicking on the text field after typing.
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);
});
});
Code for the text Field and Button.
<label for="uetitle">Update Hero Title</label>
<input type="text" id="hrtitle" name="hrtitle">
<button class="save-button" id="hrtitleSave" type="submit">Save</button>
How do I get the text to save on the button click instead?
Seems like you are using the wrong id for getting your button. This code should be working:
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>