addEventListener() 和 removeEventListener() 在循環中傳遞參數

Question

我有一個 HTML table和兩個按鈕update和cancel 。

我希望執行這些操作：

• 如果單擊update按鈕，則所有單元格將變為可單擊，如果單擊某個單元格，則其背景顏色將為綠色。
• 如果單擊cancel按鈕，則現在將沒有可單擊的單元格。

我得到什么結果

僅更新最后一個單元格。 無論我點擊哪個單元格。

到目前為止我嘗試過的...

• HTML表

<table>
    <tbody>
        <tr class="text-center">
            <th scope="col">SUN</th>
            <td class="bg-danger" scope="col" id="SUN8"></td>
            <td scope="col" id="SUN9"></td>
            <td scope="col" id="SUN10"></td>
            <td scope="col" id="SUN11"></td>
            <td scope="col" id="SUN12"></td>
            <td class="bg-warning" rowspan="6"><br>B<br>R<br>E<br>A<br>K</td>
            <td scope="col" id="SUN2"></td>
            <td scope="col" id="SUN3"></td>
            <td scope="col" id="SUN4"></td>
        </tr>
        <tr class="text-center">
            <th scope="col">MON</th>
            <td scope="col" id="MON8"></td>
            <td scope="col" id="MON9"></td>
            <td scope="col" id="MON10"></td>
            <td scope="col" id="MON11"></td>
            <td scope="col" id="MON12"></td>
            <td scope="col" id="MON2"></td>
            <td scope="col" id="MON3"></td>
            <td scope="col" id="MON4"></td>
        </tr>
    </tbody>
</table>

• 兩個按鈕

<button class="btn btn-primary" href="#" id="updateSchedule" style="display: block;"
        onclick="startUpdate()">
        Update
</button>

<button class="btn btn-secondary mt-3" href="" id="cancelUpdate" style="display: none;"
        onclick="cancelUpdate()">
        Cancel
</button>

• JavaScript 中的按鈕參考

update = document.getElementById("updateSchedule")
cancel = document.getElementById("cancelUpdate")

• 我有一個所有單元格 ID 的列表

const id_list = ["SUN8", "SUN9", "SUN10", "SUN11", "SUN12", "SUN2", "SUN3", "SUN4", "MON8", "MON9", "MON10", "MON11", "MON12", "MON2", "MON3", "MON4"]

• JavaScript 功能

    function startUpdate() {
        update.style.display = "none"
        cancel.style.display = "inline-block"
        let cell;
        for (let i = 0; i < id_list.length; i++) {
            cell = document.getElementById(id_list[i])
            cell.style.cursor = "pointer"
            cell.addEventListener("click", showAlert.bind(cell));
        }
    }

    showAlert = function () {
        cell.classList.add("bg-success");
    }

    function cancelUpdate() {
        update.style.display = "block"
        cancel.style.display = "none"

        for (let i = 0; i < id_list.length; i++) {
            cell = document.getElementById(id_list[i])
            cell.style.cursor = "default"
            cell.removeEventListener("click", showAlert);
        }
    }

Answer 1

您可以在 .addEventListener .addEventListener中編寫代碼，如下所示：

我已經更新了startUpdate的代碼，您可以對您的cancelUpdate function 進行相同的更改:)

Javascript ：

function startUpdate() {
        update.style.display = "none"
        cancel.style.display = "inline-block"
        let cell;
        for (let i = 0; i < id_list.length; i++) {
            cell = document.getElementById(id_list[i])
            cell.style.cursor = "pointer"
            cell.addEventListener("click", function () {
            cell.style.backgroundColor = "red";
           });
        }
    }

Answer 2

update = document.getElementById("updateSchedule");
cancel = document.getElementById("cancelUpdate");

const id_list = ["SUN8", "SUN9", "SUN10", "SUN11", "SUN12", "SUN2", 
                 "SUN3", "SUN4", "MON8", "MON9", "MON10", "MON11", 
                 "MON12", "MON2", "MON3", "MON4"]

function startUpdate() {
    update.style.display = "none"
    cancel.style.display = "inline-block"
    let cell;
    for (let i = 0; i < id_list.length; i++) {
        cell = document.getElementById(id_list[i])
        cell.style.cursor = "pointer"
        cell.addEventListener("click", showAlert);
    }
}

showAlert = function (event) {
    event.target.classList.add("bg-success");
}

function cancelUpdate() {
    update.style.display = "block"
    cancel.style.display = "none"
    for (let i = 0; i < id_list.length; i++) {
        cell = document.getElementById(id_list[i])
        cell.style.cursor = "default"
        cell.removeEventListener("click",showAlert)
    }
}