Question

我的代码有三个功能。我想要一个按钮在第一次按下时运行功能一，然后在第三次按下第二次功能3时按下功能2然后再按下它。

这是我的代码：

<!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>

Answer 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>

Answer 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()
  }
}

Answer 3

我可以使用switch语句，只需引用lights数组来确定接下来要显示的内容。看起来很无痛。

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" />

Answer 4

你去了

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

Answer 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>

Answer 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>

Answer 7

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

var functionArray = [changered,changeyellow,changegreen]

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

完整代码：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

如何让HTML按钮一个接一个地运行三个功能

7 个答案: