Elements are objects, right? Can I add fields to them?

Ask the community
,
1

I’m a Javascript novice, just playing around with Velo, and I’m trying to associate one page element with another. So, for example, if Element A is a text heading and Element B is a text body, I’d like Element A to have a field for its text body or vice-versa. My understanding of Javascript is that anything can be added to anything, so this aught to be as simple as doing ElementA[body] = ElementB and calling it a day. But this doesn’t seem to be working. Here’s my implementation:

$w. onReady(LetsGo);
let heading;

function LetsGo() {
heading = $w( ‘#PastHeading’ );
heading .body = $w( ‘#PastBody’ );
console .log(pastHead. body .id);
}
export function expand_something(event) {
console. log(event .target. body);
}

The result is that the console output in LetsGo() corrects outputs “PastBody”, but the console output in expand_something() (triggered by a mouse click on the heading element) outputs “undefined.” Obviously I’m missing something. What am I missing? Any help is appreciated.

-Aidan

2

What exactly is it you are trying to accomplish? Where are the elements #PastHeading and #PastBody? What do you mean by a “text heading” and “text body”? What does your page look like?

Page elements are objects which have clearly defined APIs. These elements object can’t be modified.

3

BTW - using event.target in the event handler doesn’t work, but the following does:

export function expand_something(event) {
    console.log(heading.body.text);
}

I suspect that event.target doesn’t work since elements are not meant to be changed, the event handler doesn’t pass the additions to the element object. However, accessing the element directly does seem to work.

4

Hi Aiden,

In Velo, you get a set of built-in components, such as Text, Text Inputs, sliders, buttons etc. Each element contains its own set of capabilities which you can interact with.

To answer your question, you cannot simply ‘transform’ one component to another. However it is possible to achieve a similar effect by placing the two elements one on top of the other and then writing a few lines of codes to toggle the components’ visibility.

Check out this examples (and more) in our beginner-friendly examples library:
https://www.wix.com/velo/example/state-toggle

You can find much more information in the Documentation tab above

5

Thank you; I think that explains what was going on. I suspected the problem had something to do with the object in the Javascript being seperate from the object on the webpage.