функция события onchange, показывающая, что она не определена (Javascript-HTML-DOM)

Question

Я использую Javascript HTML DOM Events. Когда я запускаю свой код в браузере, он говорит, что statusHtmlFromObject не определен. Может кто-нибудь сказать, пожалуйста, как правильно написать это в HTML-тег, как я пытаюсь сделать. Я приложил файл script.js.

 File: Script.js
      function statusHtmlFromObject() {
      var x = document.getElementById("mySelect").value;
      console.log('This is your selection', x);
    }
     var html = '';
     html +='<select id="mySelect" onchange="statusHtmlFromObject()">';
       html +='<option value="Order placed">Order placed';
       html +='<option value="Preparing">Preparing...';
       html +='<option value="Packaging">Packaging...';
       html +='<option value="Food is ready">Food is ready';
        html +='</select>';
      return html;

Answer 1

Ваша функция statusHtmlFromObject объявлена ​​внутри другой функции. Это должно быть глобально доступно для события onchange. Это причина ошибки.

Вы должны объявить это снаружи или просто определить это глобально:

var statusHtmlFromObject  = function (){
...
};

Answer 2

const container = document.getElementById('container');
function statusHtmlFromObject() {
      var x = document.getElementById("mySelect").value;
      console.log('This is your selection', x);
    }
     var html = '';
     html +='<select id="mySelect" onchange="statusHtmlFromObject()">';
       html +='<option value="Order placed">Order placed';
       html +='<option value="Preparing">Preparing...';
       html +='<option value="Packaging">Packaging...';
       html +='<option value="Food is ready">Food is ready';
        html +='</select>';
        container.innerHTML += html;

<div id="container"></div>
<script src=""><script/>

Это работает.Вы должны добавить свой html к тегу div или любому другому html-элементу в целом.