How To Get onchange Event to Work

[Elephant42]

	<sdpi-item label="Position">
		<sdpi-select setting="monitor_position" placeholder="Please display position">
			<option value="top">Top</option>
			<option value="middle">Middle</option>
			<option value="bottom">Bottom</option>
		</sdpi-select>
	</sdpi-item>

Can any one suggest how I can get an onchange() callback to fire on the above tag. I have tried adding an attribute onchange="my_callback()" and many variations like it, all to no avail. Extensive searching of the SDK docs and google have yielded no insight.

Any help appreciated...

[Elephant42]

Finally got this to work using addEventListener() - no matter what I did I could not get a callback on the 'change' event to fire but I finally managed to get it to work using a handler for the 'input' event. This event gives me exactly the behaviour that I need thank goodness...

[ChekTek]

Hi @Elephant42,

I'm glad you found a solution! One thing you might try is referencing the focus element like so:

const imageTypeElement = document.getElementById('type').focusElement.value;

imageTypeElement.addEventListener('change', (event) => {
	console.log('Hello World');
});

<sdpi-item label="Type">
	<sdpi-select id="type" default="element" setting="type">
		<option value="element">HTML Element</option>
		<option value="file">File</option>
	</sdpi-select>
</sdpi-item>