Is there a way to make a button add 1 to a collection field everytime its pressed

Ask the community
,
1

hi everyone. Is there a way to make a button add 1 to a collection field every time its pressed. example, Button is clicked and the value in the text field increases to 1. when it is pressed again it changes to 2. this is the last thing i need to finish my website. thank you for any advice, It is all appreciated. i have attached a photo of what i am trying to achieve with the collection name and button and text names.

#button10 is pressed and #text52 increases by 1

753×308 49.3 KB

Thanks

2

This is super easy. A good try to learn easy JavaScript :wink:

It can look like this:

let count = 0;                    // init the variable count
$w('#button10').onClick( ()=> {   // click on Button or Box (whatever it is) 
     count++;                    // increment the variable count
     $w('#text52').text = count.toString();  // give them textField the value of count !and don't forget to cast into a string!
})

UPDATE: Added missed “.toString()”

3

thank you for your help. sorry if im doing something simple wrong, But i get this error message

Wix code SDK error: The text parameter that is passed to the text method cannot be set to the value 1. It must be of type string.

this is my code

import wixData from ‘wix-data’;

export function button18_click(event) {
let count = 0;
$w(‘#button18’).onClick( ()=> {
count++;
$w(‘#text52’).text = count;
})
}

4

is it like a like button thing? So that you can calculate how many likes you get from different users

5 
import wixData from 'wix-data';
$w.onReady(async function () {
 const findResult = await findClicks();
 let number = findResult.clicks;
    $w("#text52").text = number.toString();
    $w("#button18").onClick(async () => {
        number += 1;
        $w("#text52").text = number.toString();
 const updateResult = await updateBarbersdatabase(findResult._id, number)
    })
});

function findClicks() {
 return wixData.query("Barbersdatabase")
    .find()
    .then((res) => {
 return (res.items[0])
    })
}

function updateBarbersdatabase(id, number) {
    wixData.get("Barbersdatabase", id)
        .then((res) => {
            res.clicks = number;

            wixData.update("Barbersdatabase", res)
        })
}

I am assuming that in the database Barbersdatabase, you only have one item, so findClicks function might be wrong for your case. Also, this code does not limit users to click once, and it might crash if the user clicks it too fast. So in general this code is pretty bad, hope it helps you.

6

Hey @jakegriffin1990 ,
See this post for an answer to your question.
Regarding the error you received, keep in mind that you are working with both strings (in the text element) and numbers (for incrementing). Assigning a number to a text element will generate an error. You can use the toString() JavaScript function to convert a number to a string.
Tova

7

Hahah sure I knew this problem will come.
Change:
$w(’ #text52 ‘).text = count;
to
$w(’ #text52 ').text = count.toString();

When you read the Error, it says the Text must have a String-Value, but the variable count is a Number. So you only have to do is. make number to a string with the methode “.toString()” :wink:

8

If this number represents total clicks per all users (and not just per a specific user), then you can’t add the +1 in the front-end because you’ll override other users’ clicks.
In that case, you’ll have to create a beforeUpdate hook that checks the last stored number and adds +1.

9

Thank you for taking the time to type all that code for me, It is very much appreciated. It works exactly how i wanted it to work but it updates all the items in the collection when i would ideally need each account updated individually. i have attached a photo to make this a bit clearer. thank you again. i apologise if i am doing something wrong, Im still new to this coding

697×424 43 KB

10

@benibrodi thanks you it worked perfectly. the only problem i have now it that it updates every repeater in the database by 1, Instead of individually

11

hi J. D. Thanks for you reply. you also helped me with another problem i had before. what you have explained is exactly what i need. i have a list of profiles i have created in a database. when someone clicks on post a review i need that individual repeater to display the number of times the button is pressed so i can then advertise it as how many reviews someone has received. i have attached a photo of what this looks like

697×424 43 KB

when i click post a review it updates them all, Instead of indivudally

Thank you

12

@jakegriffin1990 so in your data hooks add something like:

export function CollectionName_beforeUpdate(item, context) {
if(!item.updateScore){ return item; }
    return wixData.get("CollectionName", item._id)
    .then((res) => {
        if(!res.score){
		item.score = 1;//use your field key instead of score
		} else {
		item.score = res.score + 1;
	}
	delete item.updateScore;
     	return item;        
	})
}

And in your front-end add to your object: object.updateScore = true; before you start the update.