【もりけん塾】JavaScript課題22 -Vanilla JSでテーブルを実装③ (ソート機能を複数にする)-

const tableTitlesData = {
　"userId": "ID",
　"name": "名前",
　"gender": "性別",
　"age": "年齢"
}

const renderSortButton = () => {
　const sortTarget = [tableTitlesData.userId, tableTitlesData.age];

　if(sortTarget) {
　　sortTarget.forEach(target => {
　　　const targetEl = [...document.querySelectorAll(".js-table-title")].find(el => el.textContent === target);
　　　targetEl.classList.add("is-target");
　　　targetEl.insertAdjacentElement('beforeend', createSortButtons());
　　})
　}
};

/* 修正後 */
const addEventListenerForSortButtons = data => {
　const sortButtons = [...document.querySelectorAll(".is-target")]; //追加

　sortButtons.forEach(sortButton => {
　　sortButton.addEventListener("click", (e) => {
　　　const activeColumn = e.currentTarget; //追加

　　　initSortButtonStatus(activeColumn);
　　　switchSortButtons(activeColumn);

　　　const trArray = [...document.querySelectorAll(".js-table-row")];
　　　const sortData = createSortingData(data, activeColumn);

　　　trArray.forEach((tr, index) => {
　　　　const tdItems = tr.children;
　　　　changeTableContents(tdItems, sortData[index]);
　　　})
　　});
　})
};

const initSortButtonStatus = (target) => {
　const noTargetColumn = [...document.querySelectorAll(".is-target")].filter(column => column !== target);
　noTargetColumn.forEach(column => {
　　column.querySelector(".is-active").classList.remove("is-active");
　　column.querySelector("[data-button-status='default']").classList.add("is-active");
　})
}

const Sort = {
　Default: "default",
　Asc: "asc",
　Desc: "desc",
}