Refactoring callback function

Question

I struggle with refactoring my code for a color switch. Color ends up being undefined.

How can I pass the color variable from the main module to the modules while passing the callback at the same time?

main.js

import { changeColor } from "./changeColor.js"
import { showColor } from "./showColor.js"

let color = "green"

document.getElementById("button").addEventListener("click",() => { changeColor(showColor) })

changeColor.js

function changeColor(callback) {
    if (color === "green") {
        color = "red"
    }
    else {
        color = "green"
    }
    callback()
}

export { changeColor };

showColor.js

function showColor() {
    console.log(color);
}

export { showColor };

Rory McCrossan · Accepted Answer · 2022-10-07 10:34:05Z

1

Send the color value as an argument to the function you define as the callback reference, then add the argument to the function definition:

let color = "green";

document.getElementById("button").addEventListener("click", () => {
  changeColor(showColor);
})

function changeColor(callback) {
  color = color === 'green' ? 'red' : 'green';
  callback(color)
}

function showColor(c) {
  console.log(c);
}

<button id="button">Toggle</button>

answered Oct 7, 2022 at 10:34

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ray Over a year ago

Thank you Rory! Where exactly do you send the color value in your code? Shouldn't it be somewhere in the EventListener part since the color is defined in the main.js?

Ray Over a year ago

I understand how the color is handed over from the changeColor.js to showColor.js but how do I send it from main.js to changeColor.js?

Rory McCrossan Over a year ago

If you want to do that I'd suggest storing the color state as a data attribute on the DOM Element which you can read in both scopes, without having to pass any arguments. Alternatively, depending on what you do with the color variable, you could just toggle() a class on the element to update its UI instead.

Collectives™ on Stack Overflow

Refactoring callback function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related