2

みんな、私は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>
4

3 に答える 3

2

そのように追加を行うと、実際には値に追加されず、新しい文字列が作成されるだけです。ボタンにconsole.logを追加すると表示されます。

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

出力は「100px100px」です

1 つの代替ソリューション:

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-17T16:43:31.100 に答える
2

クロージャーを使用する必要があります。クロージャ コンテキスト内の変数は、左の値を保持する必要があります。次に、使用するプロパティに値を適用するときに

var actualLeft += 100; コイル.スタイル.左= actualLeft +"px";

于 2013-05-17T16:44:31.730 に答える
2

nycynik が述べたように、文字列の追加に少し不注意です。

これを試して：

function clickHandler2()
{
    var before = parseInt(coil.style.left);
    before = isNaN(before) ? 0 : before;
    coil.style.left = before + 100 + "px";
}
于 2013-05-17T16:44:33.513 に答える