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

【问题标题】：onchange event function showing not defined (Javascript-HTML-DOM)onchange 事件函数显示未定义（Javascript-HTML-DOM）
【发布时间】：2023-04-05 14:28:01
【问题描述】：

我正在使用 Javascript HTML DOM 事件，当我在浏览器中运行我的代码时，它说 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;

【问题讨论】：

如何渲染？脚本文件是如何加载的？
我已经在我的 html 页面中添加了脚本文件并尝试在 div 中获取数据，因为稍后我需要使用此按钮显示更多数据，它需要单独在脚本文件中并且不能直接在html页面上添加。我第一次在脚本文件中使用 html，对如何在 html 页面上正确显示它感到非常困惑。 @NielsNet

标签： javascript html dom dom-events

【解决方案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/>

这是有效的。您应该将您的 html 附加到 div 标记或任何其他一般的 html 元素。

【讨论】：

实际上我需要在 div 内的主 html 页面上显示这个下拉菜单，不能使用脚本标签直接在 html 页面中添加它，它需要在我已经单独的脚本文件中已经包含了。
那么你应该在你的主html页面中包含你的div标签之后的脚本（）。

【解决方案2】：

您的 statusHtmlFromObject 函数在另一个函数中声明。它必须是全局可访问的 onchange 事件。这是错误的原因。

您需要在外部声明它或只在全局范围内定义它：

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

【讨论】：

我认为你是对的。如何写在select标签中，例如onchange=??
您无需进行任何更改。您的代码中的 Onchange 事件触发 statusHtmlFromObject 函数。当您在全局范围内声明它时，一切都会正常工作。