Javascript图像交换序列

时间:2016-11-04 16:44:10

标签: javascript html image

作为一项任务,当按下按钮时,我将按顺序改变交通信号灯。我将通过使用变量并在每次显示图像时添加一个变量来执行此操作因此计算机知道什么图像到通过使用if和elses显示下一个然而我在javascript上不是很好并且它不会运行我已经在许多不同的环境中尝试过,例如在Dreamweaver和notepad ++中但是我在这里得到的不是我所拥有的:

<HTML>
<head>
    <title>Untitled Document</title>
</head>


<body>
   <img id="IMAGE" width="100" height="200"></img>
   <button onClick="imageswap(a)">GO</button>
</body>

<script>
    var a = 0
    function imageswap(a)
    {
       if (var a==0) {
       document.getElementById('IMAGE').src='red_empty_empty.png';
       var a + 1;
    } 
    else if (a==1)
    {
       document.getElementById('IMAGE').src='empty_amber_empty.png';
       var a + 1;
    } 
    else 
    {
       document.getElementById('IMAGE').src='empty_empty_red.png';
      var a==0;
    } 
 }
</script>
</html>

感谢您的阅读,我将非常感谢任何人的帮助。

编辑: 我已经接受了反馈并修改了我的代码但是在测试它时没有显示我想要的图像而是小x。

<HTML>
<head>
    <title>JAVASCRIPT</title>
</head>


<body>
   <img id="IMAGE" width="100" height="200"></img>
   <button onClick="imageswap()">GO</button>
</body>

<script>
    var a = 0
    function imageswap()
    {
       if (a=0) {
       document.getElementById('IMAGE').src='red_empty_empty.gif';
       a = a + 1;
    } 
    else if (a==1)
    {
       document.getElementById('IMAGE').src='empty_amber_empty.gif';
       a = a + 1;
    } 
    else 
    {
       document.getElementById('IMAGE').src='empty_empty_red.gif';
      var a=0;
    } 
 }
</script>
</html>

编辑: 我已经考虑了一些建议,现在当我点击按钮时显示第一个图像,然后按第二个按钮按下第二个图像但是它无法显示第三个图像,第一个和第二个图像不能一直工作。

<HTML>
<head>
    <title>JAVASCRIPT</title>
</head>


<body>
   <img id="IMAGE" width="100" height="200"></img>
   <button onClick="imageswap()">GO</button>
</body>


<script>
var a = 0;

function imageswap() {
  if (a == 0) {
    document.getElementById('IMAGE').src = 'red_empty_empty.gif';
     a += 1;
  } else if (a == 1) {
    document.getElementById('IMAGE').src = 'empty_amber_empty.gif';
     a += 1;
  } else {
    document.getElementById('IMAGE').src = 'red_empty_empty.gif';
     a = 0;
  }
}
</script>

3 个答案:

答案 0 :(得分:0)

我在a中申请。它会显示var a \

的增量

在globel中应用a +=1每次点击

时都会递增

并使用a+1代替var a = 0 console.log(a) function imageswap(){ if (a==0) { document.getElementById('IMAGE').src='red_empty_empty.png'; a += 1; console.log(a) } else if (a==1){ document.getElementById('IMAGE').src='empty_amber_empty.png'; a += 1; console.log(a) } else { document.getElementById('IMAGE').src='empty_empty_red.png'; a =0; console.log(a) } }

递增申请

<button onclick="imageswap()">GO</button><br>
<img id="IMAGE" width="100" height="200"></img>
{{1}}

答案 1 :(得分:0)

在第一行var a = 0中,您声明了您的计数器(var a部分),并通过指定值0(a = 0 part)对其进行初始化,因此不需要稍后再次声明变量,您只想通过分配新值来更新它

所以语句if (var a==0)在语法上是不正确的,因为你不能检查变量声明是否为0.你当然可以检查先前声明的变量是否具有值0,这将是if (a==0)

当您尝试递增计数器值时也是如此。 var a + 1;是错误的,因为你不能递增1个声明。你应该为现有的计数器分配自己的值加1,所以a = a + 1;

最后,当您尝试重置计数器var a==0;时,(除了通常的声明错误旁边)记住==是比较而= =是赋值。您不应该检查计数器是否为0,您应该将值0分配给计数器以重置它。

希望有所帮助

答案 2 :(得分:0)

Ok你需要注意的事情很少:

  1. 您正在函数imageswap(a)内传递,并且您正在从函数中传递的a一直访问0var a==0查看https://jsfiddle.net/aegwj88g/
  2. 您正在检查var a==1if(a==0)这是不正确的。它应该像else if(a==1)var a + 1
  3. 您正在尝试使用a=a+1赋予值,这也是错误的。左侧必须是除了存储值的javascript标记(检查JS naming convention)之外的有效变量。它应该是a+=1(或target 'myapp' do pod 'Firebase/Core' #the other projects not related with Firebase use_frameworks! end ),就像你在数学中一样;
  4. 检查fiddle