如何创建一个将由事件侦听器调用的单个函数，而不是每个不同按钮的函数？答案

【问题标题】：How can I create ONE single function that will be called by an event listener instead of function for each different button?如何创建一个将由事件侦听器调用的单个函数，而不是每个不同按钮的函数？
【发布时间】：2021-10-17 04:58:42
【问题描述】：

 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)';
}

//每个按钮将背景更改为新的。我努力寻找一种有效的方法来创建一个函数，以便在单击每个按钮时能够传递给事件侦听器

【问题讨论】：

请添加一个标签来显示这是哪种语言。
抱歉哈哈谢谢指出

标签： javascript function events addeventlistener delegation

【解决方案1】：

编写一个有参数（或自变量）的函数。

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

然后在按钮 #1 上：“onclick=anybutton(1);”其他人也是如此
如果所需的操作更复杂，您可以在 whichButton 上使用“if”语句，或编写所需的任何代码。

【讨论】：

【解决方案2】：

遍历 querySelectorAll 数组中的按钮，然后您可以使用基于 event.id 的 switch 语句来更改背景图像或您正在执行的任何操作.. 或者您可以使用 map.set 将图像设置为值与您的按钮的 id 匹配的键，并 map.get 与您的 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
   })
}

【讨论】：