onchange() 函数未定义（无法从 index.html 访问？）答案

【问题标题】：onchange() function not defined (inaccessible from index.html?)onchange() 函数未定义（无法从 index.html 访问？）
【发布时间】：2017-12-11 20:22:45
【问题描述】：

我正在为我的 html 中的 <select> 标记分配一个“onchange”属性。我在我的 main.js 文件（捆绑到 bundle.js 中）中成功地做到了这一点。然后在 index.html 中引用了我的 bundle.js。

每当 onchange 事件尝试使用我定义的函数时 filterChanged()，它提供了一个参考错误：“filterChanged is not defined 在 HTMLSelectElement.onchange"

我最初认为这可能是由于该函数不是全局变量，所以我分配给了 var 并且问题仍然存在。

见下方代码-

main.js

var filterChanged = function() {
    console.log('filter changed');
}

window.onload = function() {
    let filter = document.getElementById('filter-list');
    filter.setAttribute('onchange', 'filterChanged()');
}

index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TestProj</title>
    <script type="text/javascript" charset="UTF-8" src="build/bundle.js"></script>
</head>
<body>
    <h3>Todos</h3>
    <p>Number of items to show</p>
    <select id="filter-list" name="filter">
            <option selected="true" value="list10">10</option>
            <option value="list20">20</option>
            <option value="list30">30</option>
    </select>
    <ul id="todo_list">
        <!-- Inject list here with JS (main.js getTodos()) -->
    </ul>
</body>
</html>

【问题讨论】：

.addEventListener()

标签： javascript html dom webpack ecmascript-6

【解决方案1】：

您可以使用不同的方式。将 onchange 添加到您的选择的第一种方法：

<select id="filter-list" name="filter" onchange="filterChanged();">

使用 eventListener 的第二种方式：

filter.addEventListener('change', filterChanged);

第三种方式：

window.onload=function() {
  let filter = document.getElementById('filter-list');
  filter.onchange=function() {
    // The code of your function
  } 
}

【讨论】：

我尝试了第一种方法（将 onchange 添加到 html 中的选择中），这对我之前不起作用。但是，事件侦听器方法可以完美运行。谢谢
很高兴听到这个消息:)

【解决方案2】：

请使用：

filter.addEventListener("change", filterChanged);

【讨论】：

【解决方案3】：

不要这样做：

filter.setAttribute('onchange', 'filterChanged()');

但是做：

filter.addEventListener('change', filterChanged);

【讨论】：

【解决方案4】：

这是 addEventListener() 的常用格式

object.addEventListener("change", myScript);

所以更新你的代码

filter.setAttribute('onchange', 'filterChanged()');

到

filter.addEventListener('change', filterChanged);

【讨论】：

【解决方案5】：

这会起作用，你不需要在

或

或者这个

【讨论】：