I’m trying to write a designer extension that allows users to insert a form anywhere on a site. I haven’t been able to figure out how to add any kind of event listener. How can I listen to an onSubmit or onChange event?
Here’s my code so far:
document.getElementById('lorem').onsubmit = async (event) => {
event.preventDefault();
const element = await webflow.getSelectedElement();
if (!element) {
alert('element not found');
return;
}
if (!element.save) {
alert('element.save not found');
return;
}
const input = webflow.createDOM('input');
input.setAttribute('type', 'text');
input.setAttribute('placeholder', 'calculate square root');
input.setAttribute('id', 'square-root');
input.setAttribute('onchange', 'foo'); // doesn't get saved in the DOM
input.addEventListener('input', (event) => { // throw an error Property 'addEventListener' does not exist on type 'DOMElement'.
const { value } = event.target;
const number = Number(value);
if (isNaN(number)) {
return;
}
event.target.value = Math.sqrt(number).toString();
});
element.setChildren([input]);
await element.save();
};
Also - how does one do type narrowing here? I keep getting TS errors that this or that method is not available on a given type.
