我正在将“onchange”属性分配给 <select>我的 html 中的标签。我已经在我的 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>
最佳答案
您可以使用不同的方式。 第一种方法将 onchange 添加到您的选择:
<select id="filter-list" name="filter" onchange="filterChanged();">
使用事件监听器的第二种方式:
filter.addEventListener('change', filterChanged);
第三种方式:
window.onload=function() {
let filter = document.getElementById('filter-list');
filter.onchange=function() {
// The code of your function
}
}
关于javascript - onchange() 函数未定义(无法从index.html访问？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44972423/