2016-11-04 58 views
0

作为一项任务,我将在按下按钮时使交通灯顺序改变。我将通过使用变量并在每次显示图像时向其添加一个来做到这一点,因此计算机通过使用if和elses知道下一个要显示的图像,但是我不擅长JavaScript,它不会运行我已经在许多不同的环境中尝试过,例如在Dreamweaver和记事本++中,但是不会在这里是我所拥有的得到:Javascript图像切换序列

<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> 
+2

你有几个语法错误。使用[JSHint](http://jshint.com/)找到它们。 – Xufox

+0

在第3行jshint给了我错误“预期的标识符,而是看到'var'。”但我不明白如何解决这个问题,请解释一下? – benisbestpokemongo

回答

0

我在console.log(a)应用。它会显示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>

+0

好吧,说我删除从括号内的a如何获得代码然后工作? (考虑到我已经添加了缺少的分号) – benisbestpokemongo

+0

哪一个括号?你能解释一下吗?请参阅我不应用任何值在括号内'imageswap()' – prasanth

+0

是的多数民众赞成在我的意思是什么都没有在功能图像交换发生任何事情 – benisbestpokemongo

0

var a = 0你宣布你的计数器(在var a部分),并通过将值0(a = 0 part)初始化它第一线,因此没有必要稍后再次声明变量,你只是想将其更新分配新值

这样的声明if (var a==0)是不正确的语法,因为你不能检查,如果一个变量声明为0,你当然可以检查的,如果上面定义的变量具有的值为0,这将是if (a==0)

当您尝试增加co时也是如此价值不菲。 var a + 1;是错误的,因为你不能递增1个声明。你应该将分配给现有的柜台,本身的值加1,所以a = a + 1;

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

希望它有助于

0

好一些事情你需要照顾:

  1. 您的功能imageswap(a)内传递,你是从那将是在函数中传递的值访问a0一直。检查https://jsfiddle.net/aegwj88g/
  2. 您正在检查var a==0var a==1这是不正确的。它应该像if(a==0)else if(a==1)
  3. 您正试图将值分配给var a + 1,这也是错误的。左手边必须是一个有效的变量,而不是javascript令牌(检查JS naming convention),它存储该值。它应该是a=a+1(或a+=1),就像你在数学中一样;

入住此fiddle