我怎样才能让一个HTML按钮一个接一个地运行三个功能答案

【问题标题】：How can i make a HTML button run three functions one after another我怎样才能让一个HTML按钮一个接一个地运行三个功能
【发布时间】：2017-04-30 04:59:21
【问题描述】：

我的代码具有三个功能。我希望一个按钮在第一次按下时运行功能 1，然后在第二次按下时运行功能 2，在第三次按下时运行功能 3，然后将其重置。

这是我的代码：

<!DOCTYPE html>
<html> 
    <head> 
        <script> 
            var red = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png"
            var yellow = "https://s24.postimg.org/dodxgn305/yellow.png"
            var green = "https://s29.postimg.org/5ljr1ha3r/green.png"
            var lights =[red,yellow,green]

            function changered()
            {
                var img = document.getElementById("light");
                img.src= lights[0];
                return false;
            }
            function changeyellow()
            {
                var img = document.getElementById("light");
                img.src= lights[1];
                return false;
            }
            function changegreen()
            {
                var img = document.getElementById("light");
                img.src= lights[2];
                return false;
            }
        </script>
    </head>
    <body>
        <button id="sequence" onclick="changeyellow" onclick="changered" onclick="changegreen">sequence</button>
        <br><br><br>
        <img id="light" src="https://s29.postimg.org/5ljr1ha3r/green.png" />
    </body>
</html>

【问题讨论】：

请不要破坏您的帖子。一旦您发布了一个问题，它就属于整个 Stack Overflow 社区（在CC-by-SA license 下）。如果您想取消此帖子与您帐户的关联，请参阅What is the proper route for a dissociation request?。

标签： javascript html

【解决方案1】：

您只能使用一个函数和一个包含当前颜色的全局变量，如下所示：

<!DOCTYPE html>
<html> 
<head> 
<script> 
var red = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png"
var yellow = "https://s24.postimg.org/dodxgn305/yellow.png"
var green = "https://s29.postimg.org/5ljr1ha3r/green.png"
var lights =[red,yellow,green];
var currentColor = 0;

function changeColor() {
    var img = document.getElementById("light");
    img.src= lights[currentColor];
    if (currentColor === (lights.length - 1)) {
        currentColor = 0;
    } else {
        currentColor++;
    }
    return false;   
}
</script>

</head>
<body>

<button id="sequence" onclick="changeColor();">sequence</button>
<br><br><br>
<img id="light" src="https://s29.postimg.org/5ljr1ha3r/green.png" />
</body>
</html>

【讨论】：

【解决方案2】：

有几种方法可以处理它，但这里有一个简单的方法：

以上：

function changered()

添加这个：

var cur_button = 1

然后将您的按钮更改为：

<button id="sequence" onclick="handle_click()">sequence</button>

并添加此功能：

function handle_click()
{
  if(cur_button == 1)
  {
      cur_button = 2
      changered()
  }
  else if(cur_button == 2)
  {
      cur_button = 3
      changeyellow()
  }
  else if(cur_button == 3)
  {
      cur_button = 1
      changegreen()
  }
}

【讨论】：

【解决方案3】：

你来了

 <input type="button" name="btnn" onclick="runFunction()" />


<script> 
 var red = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png";
 var yellow = "https://s24.postimg.org/dodxgn305/yellow.png";
 var green = "https://s29.postimg.org/5ljr1ha3r/green.png";
 var lights =[red,yellow,green];
 var a =1;

function changered()
 {
  var img = document.getElementById("light");
  img.src= lights[0];
  return false;
 }
function changeyellow()
{
  var img = document.getElementById("light");
  img.src= lights[1];
 return false; 
 }
function changegreen()
 {
  var img = document.getElementById("light");
  img.src= lights[2];
  return false;
   }

function runFunction()
{
if(a==1)
  {
changered();
a++;
    }
if(a==2)
{
changeyellow();
a++;
}
if(a==3)
{
changegreen();
a=1;
}
}

【讨论】：

【解决方案4】：

我可以使用 switch 语句，并简单地引用灯光数组来确定接下来要显示的内容。看起来很无痛。

var red = "https://snowmonkey.000webhostapp.com/images/red.png"
var yellow = "https://snowmonkey.000webhostapp.com/images/yellow.png"
var green = "https://snowmonkey.000webhostapp.com/images/green.png"
var lights =[red,yellow,green]

handleClick = function(){
  var light = document.getElementById("light");
  switch (light.src) {
      case lights[0]:
        light.src = lights[1];
        break;
      case lights[1]:
        light.src = lights[2];
        break;
      case lights[2]:
        light.src = lights[0];
        break;
    }
}

#light {
  float: right;
  width: 50px;
}

<button id="sequence" onclick="handleClick();">sequence</button>
<br><br><br>
<img id="light" src="https://snowmonkey.000webhostapp.com/images/green.png" />

【讨论】：

【解决方案5】：

https://jsfiddle.net/x1rqwzvy/1/

您不应在 html 代码中添加多个 onclick。如果你这样做，处理程序将同时激活。这意味着您必须使用 JavaScript 处理更改。

要确定光线，您只需在以下示例中增加一个值：

  function lightChange() {

  lightChange.incrementer = lightChange.incrementer || 1;
  switch (lightChange.incrementer) {
    case 1:
      changered();
      break;
    case 2:
      changeyellow();
      break;
    case 3:
      changegreen();
      lightChange.incrementer = 0;
      break;
  }
  lightChange.incrementer++;

  function changered() {
    var img = document.getElementById("light");
    img.src = lights[0];
    return false;
  }

  function changeyellow() {
    var img = document.getElementById("light");
    img.src = lights[1];
    return false;
  }

  function changegreen() {
    var img = document.getElementById("light");
    img.src = lights[2];
    return false;
  }
}

然后只需将 onclick 处理程序更改为 lightChange，而不是尝试添加三个连续的处理程序。

  <button id="sequence" onclick="lightChange()">sequence</button>

【讨论】：

有效，但这是我的问题：除了 img.src，每个 change* 函数都完全相同。冗余是一个可能被破坏的地方。
@Snowmonkey 我同意它是多余的，但这并不一定会使它容易被破坏。我以我没有无知的方式构建它，因为有更苗条的方式来回答这个问题，但我在可读性方面犯了错误，因为有人问这个特定问题可能对语言有点新。

【解决方案6】：

怎么样

var counter = 0;

function changeColor(){
    counter++;

    var img = document.getElementById("light");
    img.src= lights[counter % 3];
    return false;
}

你的 html 应该是：

<button id="sequence" onclick="changeColor()">sequence</button>

【讨论】：

【解决方案7】：

您可以创建一个函数数组，然后在完成后从中删除条目。

var functionArray = [changered,changeyellow,changegreen]

function sequenceClick(){
  functionArray[0]();
  functionArray.shift();
}

完整代码：

var red = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png"
var yellow = "https://s24.postimg.org/dodxgn305/yellow.png"
var green = "https://s29.postimg.org/5ljr1ha3r/green.png"
var lights =[red,yellow,green]

function changered()
{
var img = document.getElementById("light");
img.src= lights[0];
return false;
}
function changeyellow()
{
var img = document.getElementById("light");
img.src= lights[1];
return false;
}
function changegreen()
{
var img = document.getElementById("light");
img.src= lights[2];
return false;
}
  
var functionArray = [changered,changeyellow,changegreen]
  
function sequenceClick(){
  functionArray[0]();
  functionArray.shift();
}

<!DOCTYPE html>
<html> 
<head> 
</head>
<body>

<button id="sequence" onclick="sequenceClick()">sequence</button>
<br><br><br>
<img id="light" src="https://s29.postimg.org/5ljr1ha3r/green.png" />

</body>
</html>

【讨论】：