單擊按鈕三次后如何激活新的function

Question

我想在單擊按鈕 3 次后添加新的 function 並擦除/刪除以前的 function

html 文件：

<body> 
  <div id="background">
    <p>this background white, before</p>
  </div>
  <button class="btn-1">change color</button>
</body>

javascript：

const btn1 = document.querySelector(".btn-1") ;
const bg = document.getElementById("background")

const toRed = ()=>{
  bg.style.backgroundColor = "red";
}
const toBlue = ()=>{
  bg.style.backgroundColor = "steelblue";
}

btn1.addEventListener('click', toRed);

// 我希望這個btn1有 function 來清除 function toRed並在點擊 3 次后添加toBlue

Answer 1

刪除事件偵聽器並在單擊 3 次時添加一個新偵聽器：

 const btn1 = document.querySelector(".btn-1"); const bg = document.getElementById("background"); var redClicked = 0; const toRed = ()=>{ bg.style.backgroundColor = "red"; redClicked++; if (redClicked >= 3) { btn1.removeEventListener('click', toRed); btn1.addEventListener('click', toBlue); } } const toBlue = ()=>{ bg.style.backgroundColor = "steelblue"; } btn1.addEventListener('click', toRed);

 <body> <div id="background"> <p>this background white, before</p> </div> <button class="btn-1">change color</button> </body>

單擊按鈕三次后如何激活新的function

問題描述

1 個解決方案

解決方案1
0 2022-01-18 14:44:30

單擊按鈕三次后如何激活新的function

問題描述

1 個解決方案

解決方案1 0 2022-01-18 14:44:30

解決方案1
0 2022-01-18 14:44:30