HTML5和Javascript - 一个函数似乎只能工作一次

伙计们，我正在用HTML5和javascript玩游戏。目前我正在做的事情如下：屏幕上有一个紫色块，当你点击一个按钮时，它会向右移动100像素。这工作到目前为止，然而，该功能只在第一次运行。我找不到我的错误。我张贴的全部源代码（JavaScript的HTML和CSS）HTML5和Javascript - 一个函数似乎只能工作一次

<!doctype html> 
<head> 
<style> 
#stage{ 
    position: relative; 
    width : 800px; 
    height : 600px; 
    background: #c0c0c0; 
    border: 1px dashed black; 
} 

.coil{ 
    width: 64px; 
    height: 64px; 
    background: #800080; 
    position: absolute; 
    top: 200px; 
    left: 50px; 
} 
</style> 
</head> 


<body> 
<div id="stage"> 
<div class="coil"></div> 
<button id="button1">move!</button> 
</body> 
<script> 
var coil = document.querySelector(".coil"); 
var button = document.querySelector("#button1"); 
button.addEventListener("click", clickHandler2, false); 

//why is it working correctly just once 
function clickHandler2() 
{ 
    coil.style.left += 100 + "px"; 
} 
</script>

来源

2013-05-17 Bloodcount

每次要追加字符串 '100px的' 到'coil.style.left'财产。所以在第二次点击你有无效的CSS。 – XGundam05

好的，我该如何解决这个问题？ – Bloodcount

只是一些注意事项：1.你没有'html'标签。 2.你不关闭'＃stage'标签。 3.你把'script'放在'body'之外，并且它是HTML无效的。 – 2013-05-17 16:46:29

正如nycynik所说，你对字符串的添加有点粗心。

试试这个：

function clickHandler2() 
{ 
    var before = parseInt(coil.style.left); 
    before = isNaN(before) ? 0 : before; 
    coil.style.left = before + 100 + "px"; 
}

来源

2013-05-17 16:44:33

谢谢，当系统让我时，我会将其标记为答案。 – Bloodcount

这里是一个工作小提琴：http://jsfiddle.net/FAf4Q/（一些微调需要虽然...） – WheretheresaWill

当你做你的插件那样，它没有实际增加值，其仅在进行一个新的字符串;在按钮上添加一个console.log，你会看到。

console.log(coil.style.left += 100 + "px");

输出为 “100px100px”

一个替代的解决方案：

var coilPos = 100; 
//why is it working correctly just once 
function clickHandler2() 
{ 
    coilPos += 100; 
    coil.style.left = coilPos + "px"; 
    console.log(coil.style.left += 100 + "px"); 
}

来源

2013-05-17 16:43:31 nycynik

您必须使用封闭。闭包上下文中的变量必须保留左值。然后，将值应用到您使用的财产

var actualLeft + = 100; coil.style.left = actualLeft +“px”;

来源

2013-05-17 16:44:31 Fico

HTML5和Javascript - 一个函数似乎只能工作一次

回答

相关问题