if (notesValue) {
document.querySelector(`.card-${domain.id} .add-notes-button`).classList.add('notes-filled');
} else {
document.querySelector(`.card-${domain.id} .add-notes-button`).classList.remove('notes-filled');
}
The refactoring is simply done by using the second force param of the toggle Method:
Element.classList.toggle("className", forceBoolean)
MDN Docs DOMTokenList.toggle()
const EL_button = document.querySelector(`.card-${domain.id} .add-notes-button`);
EL_button.classList.toggle('notes-filled', notesValue);
document
.querySelector(`.card-${domain.id} .add-notes-button`)
.classList
.toggle('notes-filled', notesValue);
Using toggle is a good idea but for a more general case where a method like that doesn't exist you could choose which method on the object to target e.g.:
document.querySelector(`.card-${domain.id} .add-notes-button`)
.classList[notesValue ? 'add' : 'remove']('notes-filled');