Question

我正在学习使用JS进行DOM操作。使用JS我正在从数组中创建多个div，并希望在每个div上调用JS函数。我写了两个版本：版本1，以简化检查它是否可以正常工作。蚂蚁工作。但是版本2（我需要）不起作用。版本2有什么问题？有人可以帮我吗？

版本1：

document.addEventListener('DOMContentLoaded', function() {
const arr = ['AAA', 'BBB', 'CCC'];
arr.forEach(add_elms);

function add_elms(arr) {
    // Create div
    const item = document.createElement('div');
    item.innerHTML = arr;
    // Add button 
    const go = document.createElement('button');
    go.setAttribute('onclick', 'this.parentElement.style.color = "red"');
    go.innerHTML = 'Go';
    item.append(go);
    document.querySelector('#target').append(item);
};

});

版本2：

document.addEventListener('DOMContentLoaded', function() {
const arr = ['AAA', 'BBB', 'CCC'];
arr.forEach(add_elms);

function add_elms(arr) {
    // Create div
    const item = document.createElement('div');
    item.innerHTML = arr;
    // Add button 
    const go = document.createElement('button');
    go.className = 'gobutton';
    go.innerHTML = 'Go';
    item.append(go);
    document.querySelector('#target').append(item);
};

document.querySelector('.gobutton').forEach(function(button) {
    button.onclick = function() {
        this.parentElement.style.color = "red";
    };
});

任何想法我的版本2有什么问题吗？谢谢！

javascript-调用功能不起作用

0 个答案: