如何将现有函数添加到新的 createElement 元素

Question

I would like to give newButton the colourChange function. I think I need to use DOMNodeInserted but I'm not quite sure how.

let button = document.querySelectorAll('button');
const colours = ['red', 'yellow', 'green', 'blue'];
const colourChange = button.forEach(press => {
    press.style.backgroundColor = colours[0];
    press.addEventListener('click', e => {
        e.target.style.backgroundColor = colours[(colours.indexOf(e.target.style.backgroundColor) + 1) % colours.length];
    });
});

const createButton = document.getElementById('new button');
createButton.addEventListener('click', e => {
    console.log('creating')
    const newButton = document.createElement("button");
    newButton.innerHTML = "click";
    newButton.classList.add('button');
    document.body.appendChild(newButton);
})

Answer 1

Edit to the following

colourChange();
function colourChange(){ 
let button = document.querySelectorAll('button');
const colours = ['red', 'yellow', 'green', 'blue'];
button.forEach(press => {
press.style.backgroundColor = colours[0];
press.addEventListener('click', e => {
    e.target.style.backgroundColor = 
colours[(colours.indexOf(e.target.style.backgroundColor) + 1) % colours.length];
});
});
}
const createButton = document.getElementById('new button');
createButton.addEventListener('click', e => {
console.log('creating')
const newButton = document.createElement("button");
newButton.innerHTML = "click";
newButton.classList.add('button');
document.body.appendChild(newButton);
colourChange();
})