Как изменить стиль кнопки и стиль значка, вложенного в кнопку, нажатием кнопки?

Question

Я пытаюсь установить функцию: если я нажимаю на кнопку или иконку, вложенную в кнопку, их стиль меняется одновременно. К сожалению, когда я нажму на ту же кнопку, изменится только ее стиль, и значок не будет реагировать.

Есть ли простой метод, который бы сделал это правильно?

if(e.target.className === 'check-button' || 'fa fa-check'){ //change color
        e.target.closest('.fa-check').style.color = "white";
        e.target.closest('.check-button').style.backgroundColor = "coral";
        e.target.closest('.check-button').style.border = '2px solid coral';                         
    }

Answer 1

Я порылся в коде и добавил классы в css для выбранных кнопок, таких как @jameslafferty.Я не изменил свой опубликованный код, но я добавил childNodes [0], чтобы добавить класс selected к вложенному значку.Затем кнопка меняет стиль со значком одновременно, независимо от того, где я нажимаю на кнопку.

containerPerson.addEventListener('click', (e) => {
    if(e.target.closest('.check-button') !== null){ //adding classes for button and icon
        e.target.closest('.check-button').classList.add('selected');
        e.target.closest('.check-button').childNodes[0].classList.add('selected');
    }
    if(e.target.className === 'check-button' || 'fa fa-check'){ //change color
        e.target.closest('.check-button').style.backgroundColor = "coral";
        e.target.closest('.fa-check').style.color = "white";
        e.target.closest('.check-button').style.border = '2px solid coral';                         
    }
});

Answer 2

e.target.className === 'check-button' || 'fa fa-check' Это не будет сравнивать e.target.className с обеими строками слева. Но это сравнит его с первым значением перемирия среди левого. Вы можете использовать массив и Array.prototype.some()

Во-вторых, просто не используйте closest снова и снова сохраните его в переменной и используйте

if(['check-button','fa fa-check'].some(a => a===e.target.className)){ //change color
        e.target.closest('.fa-check').style.color = "white";
        let elm = e.target.closest('.check-button');
        elm.style.backgroundColor = "coral";
        elm.style.border = '2px solid coral';                         
    }