Hello,
I recently switched to wix code and I would like to know if there is a way to create a click counter connected to a button.
For exemple: a question with a “Yes” and “No” as answer buttons…
I would like to collect the amount of clicks for each answer and display it on my website.
Please let me know if there is a way for me to do that.
Thank you
1 Like
Hi Joffrey,
Of course yes, you can!
In order to accomplish this, you should add collection with one item a and two fields (for instance) - 1st for “yes” answers and 2nd for “no”
Then add onClick events on both buttons. In each event - get current value from specific sell, increment it by one and then store it back. You can achive it with wixData module - Velo: Working with the Data API | Help Center | Wix.com
And, to show the result of it, you can connect text component anywhere on stage to those fields in your collection - through another dataset.
Of course, all this needs some coding knowledge)
Mikhail, I don’t have the coding knowledges required for this so it’s quite difficult for me to do it…
Could you please explain me with a little more details what are the different steps to create those click counters? thanks
Or could you send me an exemple I can work on?
Ok, sure. Sorry, was on loooong flight)
https://mikhails8.wixsite.com/mysite-317
this is site with functionality that you need
So you have two parts: first is conecting to collection to update values, second is to show those values.
First
add collection called answers, with two fields (yesfield and nofield, both Number type)
Add two buttons, first with id “yesButton”, second with “noButton”
Add two events on them - onClick
Add this code to code section in editor:
import wixData from 'wix-data';
export function yesButton_click(event) {
wixData.query("answers").find().then((result)=>{
let answersitem = result.items[0]; //item with values
let id = answersitem._id; // this will be used for
//writing data back
answersitem.yesfield++; // increment field with yes by 1
// write updated value back to collection
wixData.update("answers", answersitem).then(()=>{
// refresh dataset to show new value
//(this should be done in promise,
//after updating collection)
$w("#dataset1").refresh();
});
}) ;
}
export function noButton_click(event) {
wixData.query("answers").find().then((result)=>{
let answersitem = result.items[0]; //item with values
let id = answersitem._id; // this will be used for writing data back
answersitem.nofield++; // increment this by 1
// write updated value back to collection
wixData.update("answers", answersitem).then(()=>{
$w("#dataset1").refresh(); // refresh dataset to show new value (this should be done in promise, after updating collection)
});
}) ;
}
comments are there, so i thin you can get the idea
and,
Second
You should actuall y just bind those two fiields within one item to 2 textfields - number of yes and number of no.
Add 2 text fields and connect them to “answers” collection, to proper fieldnames
Hope this helps
Is it possible to adapt this code to do the following;
- Instead of just add 1, add or subtract another value
- To add a value that is displayed in a textbox on the same webpage
- To change the page to a dynamic page and adapt the query so it applies the changes specific to that member. (ie adding these columns to the members collection database and the query choosing the specific value for that member to then add/subtract to/from)
Hope this makes sense.
Thanks!
Hello - I am trying to do a similar thing (I want a counter of how many people have clicked on a textbox). However I have another data query on the same page, and whenever I plug in this code it causes errors in the first code. (“‘then’ is undefined”). Whenever I delete the new code, the old one works again.
Thoughts?
Hi,
Please paste your code here.
import wixData from ‘wix-data’;
//
$w.onReady(function () {
//TODO: import wixData from ‘wix-data’
});
export function button1_click() {
const input = $w(‘#input1’).value;
wixData.query(‘Teacher_BookRequest’).eq(‘schoolEmail’, input).find().
then((result => {
if (result.items.length > 0) {
($w(‘#Materials’).expand());
$w(‘#text18’).collapse();
} else {
$w(‘#text18’).expand();
$w(‘#Materials’).collapse();
}
}));
}
export function InstructionalManualtext_click() {
wixData.query(“SiteStatistics”).find().then((result)=>{
let ("SiteStatistics",'instructionalManual') = result.items[0];
let ('instructionalManual') = ("SiteStatistics",'instructionalManual')._instructionalManual;
("SiteStatistics",'instructionalManual').instructionalManual++;
wixData.update("SiteStatistics", 'instructionalManual').then(()=>{
wixData.query("SiteStatistics").refresh();
});
}) ;
The second piece I don’t think works yet - but I am unable to check it when the first one breaks down.
The error that appears is that the first “then” is undefined.
Thanks!
Hi!
Funny bug, i will move it to dev team
try to change this line to this:
wixData.query('Teacher_BookRequest').eq('schoolEmail', input).find().then((result => {
instead of
wixData.query('Teacher_BookRequest').eq('schoolEmail', input).find().
then((result => {
Hi Mikhail!
I actually tried that already! It makes the error go away, but then the code doesn’t work anymore.
You’re doing something very strange in second part of your code.
What are you trying to achieve with this:
let (“SiteStatistics”,‘instructionalManual’) = result.items[0];
I’m not familiar with code so I’m using the template above and trying to make it fit mine.
You don’t need to change everything
export function noButton_click(event) {
wixData.query("answers").find().then((result)=>{
let answersitem = result.items[0]; //item with values
let id = answersitem._id; // this will be used for writing data back
answersitem.nofield++; // increment this by 1
// write updated value back to collection
wixData.update("answers", answersitem).then(()=>{
$w("#dataset1").refresh(); // refresh dataset to show new value (this should be done in promise, after updating collection)
});
}) ;
}
You just need to change “answers” to your database - that’s it
And, nofield to instructionalManual -as i can understand, this is your field for storing number
Thanks Mikhail! That’s the version of the code I tried initially - I then get an error message that “id” is unread. The version above was me fiddling with it to get that error to go away.
What am I missing to get that last error to go away?
Have you created initial item? I mean 1 item with field instructionalManual (number) set to 0
I had not but I just added that and the error did not go away.
Ok, so please post a link to your site where you see the error, i can’t debug it without actual site…
Thanks