Question

我正在为html中的<select>标记分配'onchange'属性。我已经在我的main.js文件中成功完成了（它被捆绑到bundle.js中）。然后在index.html中引用我的bundle.js。

每当onchange事件尝试使用我定义的函数时 filterChanged()，它提供了一个引用错误：“filterChanged未定义在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>

Answer 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
  } 
}

Answer 2

请使用：

{{1}}

Answer 3

不要这样做：

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

但是：

filter.addEventListener('change', filterChanged);

Answer 4

这是addEventListener（）

的常用格式

object.addEventListener("change", myScript);

所以更新你的代码

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

到

filter.addEventListener('change', filterChanged);

了解更多信息

https://www.w3schools.com/jsref/met_document_addeventlistener.asp

Answer 5

这样就行了，你不需要在

或

<块引用>

或者这个

<块引用>

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

5 个答案: