是否可以将这两个功能合二为一？

Question

I have two functions that are basically identical. The first function gets passed a mouse event where event.target is the input type='checkbox' the second function gets passed the input type='checkbox' is there a way to rewrite these into one function?

function crewChecked(event){                
    if(event.target.checked){
        names.push(event.target.value)
    }else{
        for(let i = 0; i < names.length;i++){
            if(names[i] == event.target.value){
                names = names.filter((name, index) => index !== i);
                break;
            }
        }
    }
    if(names.length==0){
        document.getElementById('dropdownCrewButton').innerText = "Select Crew"
    }else{
        document.getElementById('dropdownCrewButton').innerText = names.length + " crew"
    }
}


function crewChecked2(crewCheckbox){
    if(crewCheckbox.checked){
        names.push(crewCheckbox.value)
    }else{
        for(let i = 0; i < names.length;i++){
            if(names[i] == crewCheckbox.value){
                names = names.filter((name, index) => index !== i);
                break;
            }
        }
    }
    if(names.length==0){
        document.getElementById('dropdownCrewButton').innerText = "Select Crew"
    }else{
        document.getElementById('dropdownCrewButton').innerText = names.length + " crew"
    }
}

Answer 1

The only part of these two functions that differ are how you get the reference to the checkbox. So if you figure out how to get that checkbox in both cases, you're golden.

Something like:

function crewChecked(eventOrCheckbox){          
      
    // Added
    const checkbox = eventOrCheckbox.target || eventOrCheckbox

    if(checkbox.checked){
        names.push(checkbox.value)
    }else{
        for(let i = 0; i < names.length;i++){
            if(names[i] == checkbox.value){
                names = names.filter((name, index) => index !== i);
                break;
            }
        }
    }
    if(names.length==0){
        document.getElementById('dropdownCrewButton').innerText = "Select Crew"
    }else{
        document.getElementById('dropdownCrewButton').innerText = names.length + " crew"
    }
}

This line checks for a target property on the eventOrCheckbox argument. If there is one, then it's an event and the checkbox should be saved to checkbox . If there isn't, then assume this argument is the checkbox and continue on.

Answer 2

The only difference is whether you test event.target.checked and event.target.value or crewCheckbox.checked and crewCheckbox.value . crewChecked can call crewChecked2 , passing event.target as the argument.

function crewChecked(event) {
    crewChecked2(event.target);
}