0

I want to read a value from the firebase realtime database and then update the value by incrementing it with 1 and then update it again on the firebase realtime database.

The javascript function is attached to a HTML tag.

<div>
     <a href="#" onclick="return LikeButton();">Link</a> <br><br>
</div>

In the image below, I want to update the value of Clicks by incrementing +1 everytime I click on the link inside the tag.

intended value

Here is the full code - clicks_count.html

I tried to first read the database using the get() function and then use the update() function to update the data aftering incrementing the read value by +1.

function LikeButton() {
    const dbref = ref(db);

    get(child(dbref, "Blogs/001/")).then((snapshot)=>{
        if(snapshot.exists()){
            var val = snapshot.val().Clicks;
            update(ref(db, "Blogs/001"),{
                Clicks: Number(val) + 1,
            })
            .then(()=>{
                alert("data enter successful");
            })
            .catch((error)=>{
                alert("unsuccessful, error="+error);
            });
        }
        else{
            alert("No data found");
        }
    })
    .catch((error)=>{
        alert("unsuccessful, error="+error);
    });
}

Updates

I instead created a HTML button to work with my function and removed the link "" tags. I used the window.open() to open the link.

<button id="linkcntrbtn"> UPDATE </button>

Here's the JS function snippet

function LinkCounterButton() {
    const dbref = ref(db);

    get(child(dbref, "Blogs/001/")).then((snapshot)=>{
        if(snapshot.exists()){
            clicksbox.value = Number(snapshot.val().Link01Count) + 1;
            var val = snapshot.val().Link01Count;
            update(ref(db, "Blogs/001"),{
                Link01Count: Number(val) + 1,
            })
            .catch((error)=>{
                alert("unsuccessful, error="+error);
            });
            window.open("https://www.google.com", "_parent");
        }
        else{
            alert("No data found");
        }
    })
    .catch((error)=>{
        alert("unsuccessful, error="+error);
    });
    return true;
}
linkcntrbtn.addEventListener('click', LinkCounterButton);
3
  • 1
    Is there any specific reason why you're not using the atomic increment operation shown here: firebase.google.com/docs/database/web/…? --- Also: you're writing to update(ref(db, "Articles/001/"),{, but the screenshot shows (and the code *reads): from /Blogs/001. Are those supposed t be the same? Commented May 22, 2023 at 23:51
  • @FrankvanPuffelen Thanks for your reply. I am new to using Firebase realtime database with HTML and javascript. I will look into the atomic operations. It was supposed to be "/Blogs/001". I edited it now. Commented May 23, 2023 at 0:07
  • @FrankvanPuffelen My javascript function seems to work with a button tag. I already tested it and it works. But I want to make it work with HTML <a href=""> tags everytime the link is clicked, the value gets incremented. Commented May 23, 2023 at 0:09

1 Answer 1

0

My guess is that your page navigates away before it has a change to write to the database. That's because the onclick handler on an a tag has no knowledge of the asynchronous operation you're performing.

Instead of returning the result of the LikeButton call (which is undefined), return a hard-coded value of false right away to prevent the page from navigating:

<a href="#" onclick="LikeButton(); return false">Link</a>
3
  • Thanks. I was still not able to work with the above so I instead created a button tag and attached a JS function to it. I updated the code snippet in the description above. Commented May 23, 2023 at 16:52
  • I had to specify the "website url" inside window.open in my function and also I am updating the value of "Link01Count" key for a particular button. So if I have multiple buttons , how can I pass the website URL and the "key" to update in firebase as arguments I don't want to have multiple functions for each button I have in my page. Commented May 23, 2023 at 17:00
  • Good to hear you got it working @NilutpolKashyap! 👍 --- Can you post the solution as an answer? That allows you to then accept it (after a few hours), which makes it clear to the system you've been helped, makes it easier for others to find the solution - and allows folks to then upvote your answer. Also see stackoverflow.com/help/self-answer Commented May 23, 2023 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.