HTML5和Javascript-一个功能似乎只能运行一次

Question

伙计们，我在玩HTML5和javascript。 我当前正在做的事情如下：屏幕上有一个紫色块，当您单击按钮时，它向右移动了100像素。 到目前为止，此功能仍然有效，但是该功能仅在首次运行时有效。 我找不到我的错误。 我正在发布整个源代码（javascript，html和css）

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

Answer 1

当您像这样进行添加时，它实际上并没有添加到值中，而只是添加了一个新字符串。 在该按钮上添加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");
}

Answer 2

您必须使用闭包。 闭包上下文中的变量必须保留左值。 然后，将值应用于您使用的属性

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

Answer 3

正如nycynik所提到的，您对字符串的添加有些粗心。

尝试这个：

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

HTML5和Javascript-一个功能似乎只能运行一次

问题描述

3 个解决方案

解决方案1
2 2013-05-17 16:43:31

解决方案2
2 2013-05-17 16:44:31

解决方案3
2 已采纳 2013-05-17 16:44:33

HTML5和Javascript-一个功能似乎只能运行一次

问题描述

3 个解决方案

解决方案1 2 2013-05-17 16:43:31

解决方案2 2 2013-05-17 16:44:31

解决方案3 2 已采纳 2013-05-17 16:44:33

解决方案1
2 2013-05-17 16:43:31

解决方案2
2 2013-05-17 16:44:31

解决方案3
2 已采纳 2013-05-17 16:44:33