dynamically changing x coordinate

[CharliesGal]

Hello, I am new here. this is probably really simple to the boffins here, but I need help to figure this out. 

I would like to set the x coord of a rectangle to a variable. 

In app.index.js I calculate and get  myRectX which has a numerical value

then in index.gui I have the rectangle

<rect x="myRectX" y="138" width="100%" height="35" fill="fb-black" />

I can't figure out the correct code to use to set the x coord to my variable. 

Help appreciated, 

Thanks. 

[ubrinks · Accepted solution]

You have to do it the other way round. First you have to give your rect an id:

<rect id="myRect" x="0" y="138" width="20" height="35" fill="fb-black" />

The coodinates within this definitions should be constant (0 and 138 in the above example)

Second you can access your rect via the id in your javascript code:

import document from "document";

const myRect = document.getElementById("myRect");

Now you can change the coordinates:

myRect.x = 5;

myRect.y = anyOtherVariable;

You can also change the size:

myRect.height = 25;

myRect.width = 70;

And you can change the fill:

myRect.style.fill = "red";

Hope this helps.

Best

Uwe

[CharliesGal]

thank you! that worked!