我如何創建一個單一的 function 將由事件偵聽器調用，而不是為每個不同的按鈕調用 function？

Question

 function buttonOne() {
  document.body.style.backgroundImage =
    'url(imgs/advbackground1.jpg)';
}

function buttonTwo() {
  document.body.style.backgroundImage =
    'url(imgs/advbackground2.jpg)';
}


 
function buttonThree() {
  document.body.style.backgroundImage =
    'url(imgs/advbackground3.jpg)';
}

function buttonFour() {
  document.body.style.backgroundImage =
    'url(imgs/advbackground4.jpg)';
}  

//每個按鈕都會將背景更改為新內容。 我努力尋找一種有效的方法來創建一個 function 以便在單擊每個按鈕時能夠傳遞給事件偵聽器

Answer 1

編寫一個帶有參數（或自變量）的 function。

function anybutton(whichButton)
{
 document.body.style.backgroundImage = 
          'url(imgs/advbackground' + whichButton + '.jpg)';
}

然后在按鈕 #1 上：“onclick=anybutton(1);” 和其他人一樣
如果所需的操作更復雜，您可以在 whichButton 上使用“if”語句，或編寫所需的任何代碼。

Answer 2

循環遍歷 querySelectorAll 數組中的按鈕，然后您可以使用基於 event.id 的 switch 語句來更改背景圖像或您正在做的任何事情..或者您可以 map.set your images as values with keys that match您的按鈕的 ID，以及 map。獲取與您的 ID 匹配的值。

const rangeOfButtons = document.querySelectorAll(".button-class")
let targetButton = "" //to give you higher scope.
for(i=0;i<rangeOfButtons.length;i++){
  rangeOfButtons[i].addEventListener("click",function(e){
    targetButton = e.target.id
   })
}