使我的功能可重用

Question

I have a function that works how it is but I want to make it reusable so I can use it later on other projects. When I try to modify the code to take arguments instead of declaring it all in the function nothing happens. Here is my current working code......

var textColours = ["red", "orange", "green", "blue", "purple"];

var textToColour = document.getElementsByClassName("menuItem");

var randomColour = "";

var coloursUsed = [];

function randomize(array) {
 return array[Math.floor(Math.random() * array.length)];
}


function changeColour() {
for(var i = 0; i < textToColour.length; i++) {
randomColour = randomize(textColours);
if(!coloursUsed.includes(randomColour)){
  console.log("dingaling aling!");
  textToColour[i].style.color =  randomColour;
  coloursUsed.push(textToColour[i].style.color);
} else {
  i--
  console.log("duplicate");
}
console.log(coloursUsed);
console.log(coloursUsed.includes(randomColour));
 }
}


window.addEventListener("load", changeColour);

Here is what I am trying to do to make my code reusable.....

function changeColourDesired(element, colourArray) {
for(var i = 0; i < element.length; i++) {
randomColour = randomize(colourArray);
if(!coloursUsed.includes(randomColour)){
  console.log("dingaling aling!");
  element[i].style.color =  randomColour;
  coloursUsed.push(element[i].style.color);
} else {
  i--
  console.log("duplicate");
}
console.log(coloursUsed);
console.log(coloursUsed.includes(randomColour));
}
}

window.addEventListener("load", changeColourDesired(textToColour,  textColours));

I am not getting any response for that second lot of code, no console.logs and the text just stays black. I am sure it is something really simple but I can not see it.

Answer 1

您正在将一个函数的结果而不是一个函数传递给addEventListener ：

window.addEventListener("load", function() { changeColourDesired(textToColour,  textColours); });