显示未定义的onchange事件函数（Javascript-HTML-DOM）

Question

I am using Javascript HTML DOM Events,When I run my code in the browser, it says statusHtmlFromObject is not defined. Can someone please tell what is the correct way of writing it inside html tag like I'm trying to do. I've attached the script.js file.

 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

 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/> 

This is working. You should append your html to a div tag or any other html element in general.

Answer 2

Your statusHtmlFromObject function is declared inside another function. It must be global accessible for onchange event. This is reason of error.

You need to declare it outside or just define it globally:

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