I’m trying to learn work with numbers - user INPUT, storing with LET, display as NUMBER instead of text. It’s real beginners’ stuff. I found a great example called Calculate Attendance Fees by Yisrael at: https://www.grampsworkbench.com/examples .
I copied the code over to my WIX webpage. Everything looks good, no errors, but it is not working. Since I can see it working correctly on Yisrael’s web page, I know his code is good. I’m missing something obvious – but what is it?
My version of code can be viewed at: https://craig3598.wixsite.com/website/test-storage
Any help would be appreciated.
Did you add your events?
If not, when you do so make sure the event name matches exactly what you have on the code and that the items ID matched your code as well
Ok, that sounds right. But in the example I’m looking at, I don’t see that code – and yet and yet it functions. What am I missing? Example code at: https://editor.wix.com/html/editor/web/renderer/edit/09e8f73a-4576-443e-95f8-df0581ff12f9?metaSiteId=512ff276-2d90-4303-9f5a-40edd0e8beba
I tried to make my code match what what I saw here: https://editor.wix.com/html/editor/web/renderer/edit/09e8f73a-4576-443e-95f8-df0581ff12f9?metaSiteId=512ff276-2d90-4303-9f5a-40edd0e8beba
$w.onReady( function () {
});
export function members_keyPress(event) {
setTimeout(() => { // need to wait a bit for the input field to update
let fee = $w(‘#input1’).value * 15;
$w(‘#text7’).text = “” + fee;
$w(‘#text9’).text = “” + (Number($w(‘#text7’).text) + Number($w(‘#text8’).text));
}, 50);
}
export function nonmembers_keyPress(event) {
setTimeout(() => { // need to wait a bit for the input field to update
let fee = $w(‘#input2’).value * 30;
$w(‘#text8’).text = “” + fee;
$w(‘#text9’).text = “” + (Number($w(‘#text7’).text) + Number($w(‘#text8’).text));
}, 50);
}
No point pasting your Wix Editor url as it is only Wix Admin and Mods that have the permission to open your Wix Editor (for security and safety reasons).
As for using Yisrael’s example, did you turn on Dev Mode in your Wix Editor so that you got the Corvid code tabs and could see the code for it in the page tab.
Dropdown Page:
$w.onReady(function () {
});
export function members_change(event) {
let fee = $w('#members').value * 15;
$w('#totalMembers').text = "" + fee;
$w('#total').text = "" + (Number($w('#totalMembers').text) + Number($w('#totalNonmembers').text));
}
export function nonmembers_change(event) {
let fee = $w('#nonmembers').value * 30;
$w('#totalNonmembers').text = "" + fee;
$w('#total').text = "" + (Number($w('#totalMembers').text) + Number($w('#totalNonmembers').text));
}
Input Page:
$w.onReady(function () {
});
export function members_keyPress(event) {
setTimeout(() => { // need to wait a bit for the input field to update
let fee = $w('#members').value * 15;
$w('#totalMembers').text = "" + fee;
$w('#total').text = "" + (Number($w('#totalMembers').text) + Number($w('#totalNonmembers').text));
}, 50);
}
export function nonmembers_keyPress(event) {
setTimeout(() => { // need to wait a bit for the input field to update
let fee = $w('#nonmembers').value * 30;
$w('#totalNonmembers').text = "" + fee;
$w('#total').text = "" + (Number($w('#totalMembers').text) + Number($w('#totalNonmembers').text));
}, 50);
}
You can simply select all the elements on each page and copy and paste them onto your own website, however you need to make sure that you copy all the code too.
Plus you need to check what Carlos has already mentioned above and make sure that the elements have the required event handler functions added to them.
Like the members and nonmembers dropdown elements on Dropdown page needing the onChange event and the members and nonmembers input elements on the Input page needed the onKeyPress event.
Going on your link here.
My version of code can be viewed at: https://craig3598.wixsite.com/website/test-storage
It looks like you haven’t given the two user inputs on this page the onKeypress event handler function as they don’t do anything.
Hey GOS, thanks for the tip about: " No point pasting your Wix Editor url" . I was actually trying to point at Yisrael’s example code. Now I know just to point at live websites. Yes, I do have DEV mode turned on.
Carlos said “Did you add your events? If not, when you do so make sure the event name matches exactly what you have on the code and that the items ID matched your code as well.”
I’m sure Carlos is correct (possibly something with #button1). But how exactly do I do it? Also, is there a book on wix/corvid programming I can buy?
Here’s my code as of now:
$w.onReady( function () {
});
export function keyPress(event) {
setTimeout(() => { // need to wait a bit for the input field to update
let fee = $w(‘#input1’).value * 15;
$w(‘#text7’).text = “” + fee;
$w(‘#text9’).text = “” + (Number($w(‘#text7’).text) + Number($w(‘#text8’).text));
}, 50);
}
export function nonmembers_keyPress(event) {
setTimeout(() => { // need to wait a bit for the input field to update
let fee = $w(‘#input2’).value * 30;
$w(‘#text8’).text = “” + fee;
$w(‘#text9’).text = “” + (Number($w(‘#text7’).text) + Number($w(‘#text8’).text));
}, 50);
}
Here’s a screen grab of my page.
You do not need the button for it, the onKeyPress events go on the user inputs as shown below. The code will add up the values automatically after the user enters a number.
GOS, Thank you for your helpful input . The problem is solved.
I think WIX has done a great job of giving us powerful tools to use. I just wish there was a guide book or something. I don’t like asking dumb questions.
Here are a couple of thoughts for other newbies.
-
WIX Corvid is a “hybrid” tool - not a cut & past, not a language - so just looking at example code may not tell you everything you need to know.
-
Unlike javascript, WIX Corvid code resides (hides?) in multiple places:
• Dev Mode code box
• View Properties pop-up on every element
• Multiple “hidden page” codes called from a menu element that’s part of the page you are viewing
-
WIX Corvid syntax seems kind of murky:
• Frontend (viewer’s device?) vs. backend (WIX server?) In the calculator example, why do we use export function? Could this be coded with variables and not need exported?
-
WIX Corvid Documentation needs a list of reserved words :
In this example, which are reserved words, variables, item names or other?
[fee, number, text, totalMembers, keyPress, value, let, 30, text. text1, input]
Sure, you guys know, but it took me a bit.
See it run at: https://craig3598.wixsite.com/website/test-storage
