Velo: Working in the Code Panel

When you select a JavaScript template, the full syntax for the template is added to the Code Panel. For example, if you select the "for statement," the following template gets added to your code:

for (let index = 0; index < array.length; index++) {
 const element = array[index];
  
}

All you need to do is to add the code you want to run in the loop.

Because of this, you need to make sure that all the elements on your page have loaded before you try to access them using code. You do this is by including all your code that uses the $w selector in the following function:

This is only required if you add code on your own using the $w selector. Any code you add to a function using the Properties & Events panel runs only after the page loads.

Learn more about $w.onReady here.

For example, the text element has an isVisible property that returns whether the element is actually visible on-screen. This property is read-only. The text element also has the text property that contains the current text in the text element. This is a property you can both read and set.

For example, the button element has a hide method that causes the button not to appear on your site.

Some methods have additional options that affect how the action occurs. For example, you can add animation to the hide method by specifying it in the parenthesis, like this:

$w("#button1").hide("FlyOut");

A common warning message occurs when you have an unnecessary 'else' after 'return'. This most often occurs when you use the following coding pattern:

function myFunction() {
  if(someCondition) {
    //do some stuff
    return 0;
  }
  else {
    //do other stuff
    return 1;
  }   
}

If someCondition is true, the function will return. That means that we don't need the else to stop the code from executing when someCondition is true.

You can safely ignore this warning or change your code to the following pattern:

function myFunction() {
  if(someCondition) {
    //do some stuff
    return 0;
  }

  //do other stuff
  return 1;   
}

• Error message: "#text1" is not a valid selector (see image above)

  If you change the ID of an element that you are using in some of your page code, the $w() selections in your code will cause errors. For example, if you have a text element with the ID text1 and you change the ID to statusMessage, all instances where you selected the element using $w('#text1') will now be errors.
  Note: you can use the Search and Replace functionality to fix this error throughout your code.

• Error message: 'import' and 'export' may only appear at the top level

  When you import an API module, the import statement must appear at the top level of your code before the module is used. That means you cannot import the module inside a function as shown below. In general, it is recommended that you place all import statements on the first lines of your code, before any variable declarations and function definitions.

• In certain cases, the error indication does not appear at the point of your actual mistake, but occurs on the first line on which your mistake causes an error. For example, if you leave out the closing curly brace (}) in one of the functions of your page code, an error will most probably occur on whatever the next line of code happens to be. In the code shown below, a closing curly brace is missing from line 6, but the error does not occur until line 8.

Velo allows you to use images that you've stored in the Wix Media Manager in your code. When you work with elements that include an image property, such as src, a pop-up window opens, giving you the option to use an image from the Media Manager. This window appears automatically as you type "src".