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).