将文本传递给javascript函数

我刚刚开始学习javascript，并研究我们的讲师给我们的一个问题。我们有一个html站点，有四个按钮，每个按钮都有一种颜色，当你点击按钮时，它会改变背景/文本的颜色。下面是示例HTML和javascript

HTML

<div id="wrapper">
  <ul id="switcher">
    <li id="grayButton"></li>
    <li id="whiteButton"></li>
    <li id="blueButton"></li>
    <li id="yellowButton"></li>
  </ul>
</div>

我很好地实现了这一点，但我正在尝试重构，以使我的函数更通用：

document.getElementById("grayButton").onclick = changeColor("gray", "white");

function changeColor(backColor, frontColor) {
   document.getElementById("wrapper").style.backgroundColor = backColor;
   document.getElementById("wrapper").style.color = frontColor;  
}

---

我不明白为什么这样不行。有什么想法吗？

您需要在匿名函数中调用函数，添加参数

（）

会立即调用函数：

document.getElementById("grayButton").onclick = function() {
    changeColor("gray", "white");
}

---

您需要在匿名函数中调用函数，添加参数

（）

会立即调用函数：

document.getElementById("grayButton").onclick = function() {
    changeColor("gray", "white");
}

“element.onlick”事件需要函数对象（可调用/回调），而不是返回值。因此，它应该是：

document.getElementById("grayButton").onclick = function(){
    changeColor("gray", "white");
}

此外，HTML5似乎是个好主意：

红/白


灰色/黑色


函数changeColor（el）{
var wrapper=document.getElementById（“wrapper”）；
wrapper.style.color=el.getAttribute（'data-color'）；
wrapper.style.backgroundColor=el.getAttribute（'data-bg-color'）；
}

“element.onlick”事件需要函数对象（可调用/回调），而不是返回值。因此，它应该是：

document.getElementById("grayButton").onclick = function(){
    changeColor("gray", "white");
}

此外，HTML5似乎是个好主意：

红/白


灰色/黑色


函数changeColor（el）{
var wrapper=document.getElementById（“wrapper”）；
wrapper.style.color=el.getAttribute（'data-color'）；
wrapper.style.backgroundColor=el.getAttribute（'data-bg-color'）；
}

这是我的解决方案

HTML

这是我的解决方案

HTML

---

您只需调用函数

changeColor

，并将其返回值

undefined

分配给事件处理程序

我敢肯定它甚至可以工作，并改变了该元素的文本颜色和背景颜色，但与您预期的不同，即同步与异步

---

您只需要像第一个示例中那样保留对事件处理程序的引用，如

changeColor

，而不使用括号，事件处理程序将在事件发生/触发并检测到它时为您处理所有事情

您只需调用函数

changeColor

，并将其返回值

undefined

分配给事件处理程序

我敢肯定它甚至可以工作，并改变了该元素的文本颜色和背景颜色，但与您预期的不同，即同步与异步

您只需要像第一个示例中那样保留对事件处理程序的引用，如

changeColor

，而不使用括号，事件处理程序将在事件发生/触发并检测到它时为您处理所有事情

function start(){
  //Get necesary elements
  var list = document.getElementsByTagName("li");
  //Adding event
  for(var i in list){
    list[i].addEventListener("click", changeStyle);
  }
}

function changeStyle(){
  var params  = this.dataset.params.split(","),
      wrapper = document.getElementById("wrapper");

  wrapper.style.backgroundColor = params[0];
  wrapper.style.color =  params[1];
}