刪除字體粗細的 addEventListener - Javascript

Question

我通過使用 javascript 作為我的下拉鏈接創建了 javascript eventListener。 當我點擊“粗體”時，一切都變成了粗體。 對我來說沒問題，但我想在單擊時將其刪除。 當我再次單擊時，我的 removeListener 不起作用，我猜它缺少了一些東西。

先感謝您。

//HTML

          <nav class="navBar">
            <div class="dropdown">
                <button class="dropbtn"  id="dropbutton">Style menu</button>
                <div class="dropdown-content">
                    <a href="#" class="bold">Bold</a>
                    <a href="#" class="italic">Italic</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn"  id="dropbutton1">Thèmes site</button>
                <div class="dropdown-content">
                    <a href="#" class="fonce">Fonce</a>
                    <a href="#" class="pale">Pale</a>
                </div>
            </div>
        </nav>


// JAVASCRIPT

const bold = document.querySelector(".bold");
const italic = document.querySelector(".italic");
const fonce = document.querySelector(".fonce");

function Mystyle(){
   bold.style.fontWeight = "bold";
   italic.style.fontWeight = "bold";
   fonce.style.fontWeight = "bold";
  
};

bold.addEventListener("click", Mystyle);


// It does not work
function removeEvent() {
    bold.removeEventListener("click", Mystyle);
  }

Answer 1

不要刪除事件監聽器； 相反，根據每次點擊的當前 state 更改 styles（或切換類）。

function Mystyle(){
    if (bold.style.fontWeight === 'bold')
        bold.style.fontWeight = italic.style.fontWeight = fonce.style.fontWeight = "";
    else
        bold.style.fontWeight = italic.style.fontWeight = fonce.style.fontWeight = "bold";
  
};
bold.addEventListener("click", Mystyle);

切換 class 更方便：

 function Mystyle() { document.querySelector('.navBar').classList.toggle('bold'); } document.querySelector('.bold').addEventListener("click", Mystyle);

 .navBar.bold.bold, .navBar.bold.italic, .navBar.bold.fonce { /* or perhaps use.navBar.bold a */ font-weight: bold; }

 <nav class="navBar"> <div class="dropdown"> <button class="dropbtn" id="dropbutton">Style menu</button> <div class="dropdown-content"> <a href="#" class="bold">Bold</a> <a href="#" class="italic">Italic</a> </div> </div> <div class="dropdown"> <button class="dropbtn" id="dropbutton1">Thèmes site</button> <div class="dropdown-content"> <a href="#" class="fonce">Fonce</a> <a href="#" class="pale">Pale</a> </div> </div> </nav>