gpt4 book ai didi

javascript - 将 eventListener 添加到 JavaScript 中动态创建的选择框?

转载 作者:行者123 更新时间:2023-11-30 20:01:08 24 4
gpt4 key购买 nike

我正在尝试在动态创建的 div 中编写一个动态创建的选择框,这两个 div 都是在加载页面时创建的。我尝试将 onchange 事件监听器添加到选择框仅在加载页面时触发,我该如何解决这个问题?我是 html 和 JavaScript 的新手,所以我的代码是故意的。这是我的代码:

function createDiv()
{
var div = document.createElement('div');
div.className = 'main-div';
div.id = 'mainDiv';
div.setAttribute('title', 'Main Div');
var divText = document.createTextNode("Select a Number ");
div.appendChild(divText);

var select = document.createElement('select')

select.options[0] = new Option("1");
select.options[1] = new Option("2");
select.options[2] = new Option("3");
select.options[3] = new Option("4");
select.options[4] = new Option("5");
select.options[5] = new Option("6");
select.options[6] = new Option("7");
select.options[7] = new Option("8");
select.options[8] = new Option("9");
select.options[9] = new Option("10");

//select.addEventListener("change", alert("changed!"));

div.appendChild(select);


document.body.appendChild(div);
console.log(div);
}
<body onload = createDiv()>
<h1 id = "heading1">Test</h1>
<br>
<script src="js/main.js"></script>
</body>

最佳答案

addEventListener 方法在第二个参数中需要一个函数,而您没有传递一个函数,而是传递了 alert() 函数的结果(即无效)。

更改:alert("changed!")

function() {alert("changed!")}

(自 ES6 以来可以通过 () => alert("changed!") 缩短):

function createDiv() {
var div = document.createElement('div');
div.className = 'main-div';
div.id = 'mainDiv';
div.setAttribute('title', 'Main Div');
var divText = document.createTextNode("Select a Number ");
div.appendChild(divText);

var select = document.createElement('select')
for (var i = 1; i <= 10; i++) {
select.options[i] = new Option(i);
}

select.addEventListener("change", function() {alert("changed to "+select.value)});
div.appendChild(select);
document.body.appendChild(div);
}
<body onload = createDiv()>
<h1 id = "heading1">Test</h1>
</body>

关于javascript - 将 eventListener 添加到 JavaScript 中动态创建的选择框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53366388/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com