How to run the js code in the phtml

[reply2future]

Goal

Configuration UI

Issue

I would like to add input event to the input element, but it didn't work and didn't log any thing. The code in the file configure.phtml:

<script defer="defer" async="async">
	'use strict'
	console.log('load the openai extension configure page');

	(function() {
		console.log('add output event');
		function _addOutputEvent(element) {
			console.log('element:', element);
			if (element === null) return;

			element.addEventListener('input', function() {
				this.nextElementSibling.value = this.value;
				console.log(this.id, this.value);
			});
		}
		_addOutputEvent(document.getElementById('max_tokens'));
		_addOutputEvent(document.getElementById('temperature'));
	})();
</script>

The output of console:

Appreciate for any help.

[Frenzie]

It would generally be preferred to use appendScript (and depending on security settings inline might not even work).