Using javascript, how can I have my function use different reference functions within it?-CodePudding

For the function which is as follows, At the line with pixel.addEventListener("mouseover", classic);, I'd like to be able to swap the classic function reference with other function references as I have buttons that use this same function but only swap through the function reference in this line. For now I have just copied and pasted this whole function 3 different times for the 3 buttons with the different reference functions in this line, but I know there must be a more elegant solution. I have tried creating an argument for the function but it doesn't seem to work.

resolutionChange function is called like so:

window.onload = resolutionChange;
...
slider.addEventListener("click", resolutionChange);

function resolutionChange(e) {
  const otherbuttons = document.querySelectorAll("button");
  otherbuttons.forEach((button) => {
    button.classList.remove("buttonclicked");
  });

  const button = document.querySelector("#classic");
  button.classList.add("buttonclicked");

  let pixel = document.querySelectorAll(".pixel");
  pixel.forEach((pixel) => {
    pixel.remove();
  });

  let slider = document.querySelector(`#slider`);
  let res = slider.value;

  for (let i = 0; i < res * res; i  ) {
    let pixel = document.createElement("div");
    pixel.classList.add("pixel");
    pixel.setAttribute(
      "style",
      `width: ${512 / res}px; height: ${512 / res}px;`
    );
    pixel.addEventListener("mouseover", classic);
    mainholder.appendChild(pixel);
  }
}

I was hoping that I could do something like this:

function resolutionChange(func) {
  const otherbuttons = document.querySelectorAll("button");
  otherbuttons.forEach((button) => {
    button.classList.remove("buttonclicked");
  });

  const button = document.querySelector("#classic");
  button.classList.add("buttonclicked");

  let pixel = document.querySelectorAll(".pixel");
  pixel.forEach((pixel) => {
    pixel.remove();
  });

  let slider = document.querySelector(`#slider`);
  let res = slider.value;

  for (let i = 0; i < res * res; i  ) {
    let pixel = document.createElement("div");
    pixel.classList.add("pixel");
    pixel.setAttribute(
      "style",
      `width: ${512 / res}px; height: ${512 / res}px;`
    );
    pixel.addEventListener("mouseover", func);
    mainholder.appendChild(pixel);
  }
}

I can't seem to figure out the solution to be able to use the resolutionChange function block of code so that I could use it like this, for example

let darkenbutton = document.querySelector("#darken");
darkenbutton.addEventListener("click", resolutionChange(darken));
let classicbutton = document.querySelector("#classic");
classicbutton.addEventListener("click", resolutionChange(classic));
let colorsbutton = document.querySelector("#colors");
colorsbutton.addEventListener("click", resolutionChange(colors));

instead of like this

let darkenbutton = document.querySelector("#darken");
darkenbutton.addEventListener("click", buttonchange.darkenmethod);
let classicbutton = document.querySelector("#classic");
classicbutton.addEventListener("click", buttonchange.classicmethod);
let colorsbutton = document.querySelector("#colors");
colorsbutton.addEventListener("click", buttonchange.colorsmethod);

Where buttonchange object holds the resolutionChange function repeated 3 times, with only that line previously mentioned changed for the 3 different functions

CodePudding user response：

You can do that, you just need to call the function differently:

function resolutionChange(e, func) {
  const otherbuttons = document.querySelectorAll("button");
  otherbuttons.forEach((button) => {
    button.classList.remove("buttonclicked");
  });

  const button = e.target;
  button.classList.add("buttonclicked");

  let pixel = document.querySelectorAll(".pixel");
  pixel.forEach((pixel) => {
    pixel.remove();
  });

  let slider = document.querySelector(`#slider`);
  let res = slider.value;

  for (let i = 0; i < res * res; i  ) {
    let pixel = document.createElement("div");
    pixel.classList.add("pixel");
    pixel.setAttribute(
      "style",
      `width: ${512 / res}px; height: ${512 / res}px;`
    );
    pixel.addEventListener("mouseover", func);
    mainholder.appendChild(pixel);
  }
}
const darkenbutton = document.querySelector("#darken");
darkenbutton.addEventListener("click", e => resolutionChange(e, darken));
const classicbutton = document.querySelector("#classic");
classicbutton.addEventListener("click", e => resolutionChange(e, classic));
const colorsbutton = document.querySelector("#colors");
colorsbutton.addEventListener("click", e => resolutionChange(e, colors));

Alternatively, you can make the function return an event handler closure:

function makeResolutionChanger(func) {
  return function clickHandler(e) {
    const otherbuttons = document.querySelectorAll("button");
    otherbuttons.forEach((button) => {
      button.classList.remove("buttonclicked");
    });
  
    const button = e.target;
    button.classList.add("buttonclicked");
  
    let pixel = document.querySelectorAll(".pixel");
    pixel.forEach((pixel) => {
      pixel.remove();
    });
  
    let slider = document.querySelector(`#slider`);
    let res = slider.value;

    for (let i = 0; i < res * res; i  ) {
      let pixel = document.createElement("div");
      pixel.classList.add("pixel");
      pixel.setAttribute(
        "style",
        `width: ${512 / res}px; height: ${512 / res}px;`
      );
      pixel.addEventListener("mouseover", func);
      mainholder.appendChild(pixel);
    }
  }
}
const darkenbutton = document.querySelector("#darken");
darkenbutton.addEventListener("click", makeResolutionChanger(darken));
const classicbutton = document.querySelector("#classic");
classicbutton.addEventListener("click", makeResolutionChanger(classic));
const colorsbutton = document.querySelector("#colors");
colorsbutton.addEventListener("click", makeResolutionChanger(colors));