I’m trying to make a very basic interactive diagram where I want some line elements to change length (and also, if possible, position) on the page, based on some values generated from slider inputs.
For a simple example, I want to do this:
export function LSlider_change(event) {
//Add your code for this event here:
let L = $w('#LSlider').value;
$w('#line1').width = L;
}
…but $w(‘#line1’) doesn’t have a parameter/property called ‘width’.
How do I achieve this?
IF this ISN’T possible, my follow up question is: How do I pass data that I’ve determined from the these page code functions into an embedded javascript / HTML element where I’ll create the diagram instead of on the page?
Thanks for your help.
Hi.
Getting Editor element size via code is not support. You can only get window size information .
To pass data from a Wix site to an HTML component using Corvid, refer to this guide: Working with the HTML Element
Good luck!
Thank you Sam. Could I ask a follow up question, as the help guide isn’t very clear to me:
How do I pass several variable values from my page code to the HTML element?
I have this in my page code:
export function LSlider_change(event) {
//Add your code for this event here:
//%Nozzle Throat Diameter:
let L = $w('#LSlider').value;
$w("#htmlThing").postMessage(L);
}
And this in my HTML code
<script>
function init () {
window.onmessage = (event) => {
if (event.data) {
let L = event.data;
}else{
let L = 0.002;
}
}
}
//rest of code happens after this, with a canvas element
//using the value of 'L' and other variables to define
//certain sizes.
</script>
Two questions:
- What am I doing wrong here? the code runs but I can’t seem to get anything that uses L to work.
- How do I pass more variables than just L into the HTML element?
Thanks for your help.