Question

我刚刚开始使用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>

CSS

document.getElementById("yellowButton").onclick = turnYellow;

function turnYellow (){
   document.getElementById("wrapper").style.backgroundColor = "yellow";
   document.getElementById("wrapper").style.color = "orange";
    }

我得到了正常工作，但我试图重构，以便我的功能更通用：

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

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

我无法弄清楚为什么不起作用。有什么想法吗？

Answer 1

你需要在一个匿名函数中调用你的函数，添加参数()导致函数立即被调用：

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

Answer 2

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

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

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

<html>
<body>
<div id="wrapper"> 
  <ul id="switcher"> 
    <li data-bg-color="red"  data-color="white" onclick="changeColor(this)">
       red/white
    </li> 
    <li data-bg-color="gray" data-color="black" onclick="changeColor(this)">
       gray/black
    </li>
  </ul> 
</div>

<script>   
  function changeColor(el) {   
      var wrapper =  document.getElementById("wrapper");  
      wrapper.style.color = el.getAttribute('data-color'); 
      wrapper.style.backgroundColor = el.getAttribute('data-bg-color'); 
  }
</script>
</body>
</html>

HTML5 Data Attributes

Answer 3

这是我的解决方案My example

HTML

 <body onload="start()">
    <div id="wrapper">
      <ul>
        <li data-params="yellow,orange">Hit me</li>
        <li data-params="green,darkgreen">Hit me</li>
        <li data-params="aqua,blue">Hit me</li>
        <li data-params="chocolate,brow">Hit me</li>
      </ul>
    </div>
  </body>

的JavaScript

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];
}

Answer 4

您只需调用函数changeColor并将其返回值undefined分配给事件处理程序。

我很确定它甚至可以工作并改变了该元素的文本颜色和背景颜色，但不像你期望的那样，即同步和异步。

你只需要像这个changeColor那样留下对事件处理程序的引用，而没有像你在第一个例子中所做的那样的括号，事件处理程序会在事件发生时触发所有事情/触发和它检测到它。

将文本传递给javascript函数

4 个答案: