Как убрать класс у элемента через приватный метод?
Имеется несколько радио-кнопок, при нажатии на конкретную радио-кнопку у нее должен добавляться класс 'checked' и соответственно убираться, когда эта кнопка не выбрана. В моем случае, ставится 'checked', но он не убирается при выборе другой кнопки. Подскажите, пожалуйста, что нужно поправить?
class Task {
constructor(taskTemplateSelector, data, radioButton, openButton, modalTextArea, changeModalDescription) {
this._taskTemplateSelector = taskTemplateSelector;
this._shortName = data.shortName;
this._id = data.id;
this._radioButton = radioButton;
this._openButton = openButton;
this._modalTextArea= modalTextArea;
this._description = data.description;
this._changeModalDescription = changeModalDescription;
};
//Частный метод, возвращающий шаблон задачи
_getTemplate() {
const taskTemplate = document.querySelector(this._taskTemplateSelector).content.querySelector('.form__label').cloneNode(true);
return taskTemplate;
};
//Частный метод, устанавливающий слушатель на элемент
_setEventListener() {
const currentRadio = this._newTask.querySelector(this._radioButton);
currentRadio.addEventListener('input', () => {
const checkedElement = currentRadio.querySelector('.checked')
if (checkedElement) {
checkedElement.classList.remove('checked');
}
currentRadio.classList.add('checked');
this._openButton.disabled = false;
this._openButton.classList.remove('open-button__disabled');
currentRadio.id = this._id;
this._changeModalDescription(this._description);
});
};
//Публичный метод, возвращающий готовый элемент
createTask() {
this._newTask = this._getTemplate();
const taskText = this._newTask.querySelector('.form__task-text');
taskText.textContent = this._shortName;
this._setEventListener();
return this._newTask;
};
}
export {Task};
import { Task } from '../components/task.js';
import { Modal } from '../components/modal.js';
import { ResultSpace } from '../components/resultSpace.js';
//место в разметке, где располагаются задачи
const taskList = document.querySelector('.task-list');
//массив с задачами
const tasks = [
{id: 1, shortName: "Сортировка по возрастанию", description: "Дан массив [9, 19, 3, 10, 786, 1, 1, 20, 31], с помощью метода sort необходимо отсортировать его по возрастанию"},
{id: 2, shortName: "Фильтрация строк", description: "Дан массив строк [‘кот’, ‘собака’, ‘птица’, ‘крот’, ‘метод’, ‘функция’, ‘плод’, ‘кит’, ‘слон’]. Из исходного массива необходимо получить массив с теми строками, чья длина не более 4 символов"},
{id: 3, shortName: "Поиск уникального слова", description: "Дан массив [‘яблоко’, ‘слива, ‘дыня, ‘груша’, ‘груша’, ‘дыня’, ‘яблоко’, ‘арбуз’, ‘арбуз’]. Необходимо определить слово, которое встречается в массиве один раз"},
{id: 4, shortName: "Количество повторений", description: "Дан массив [‘яблоко’, ‘слива, ‘дыня, ‘груша’, ‘груша’, ‘дыня’, ‘яблоко’, ‘арбуз’, ‘арбуз’]. На основе этого массива необходимо сформировать объект, где ключ – это слово из массива, а значение – количество вхождений этого слова в массив"},
{id: 5, shortName: "Большие гласные буквы", description: "Дана цитата: Зима — это гравюра, весна — акварель, лето — масляная живопись, а осень — мозаика всех трех. Необходимо вернуть строку, в которой все гласные буквы будут большими"}
];
const modalOpen = new Modal('.modal', '.modal-text');
const openButton = document.querySelector('.open-button');
const modalButton = document.querySelector('.modal-button');
const result = document.querySelector('.result');
const resultSpace = new ResultSpace(result, '.enter-space', '.checked', arrangeNumbers, excludeWords, findUniqueWords, writeWordsNumber, changeSentence);
const createTask = (task) => {
const newTask = new Task('.task-template', task, '.form__check', openButton, '.modal-text', (data) => modalOpen.changeModalTextArea(data));
return newTask.createTask();
};
tasks.forEach((task) => {
taskList.append(createTask(task));
});
openButton.onclick = () => {
modalOpen.openModalWindow();
};
modalButton.onclick = () => {
resultSpace.changeResultText();
}
Источник: Stack Overflow на русском