javascript - 按钮没有反应

Question

我有一个显示“顶部添加”的按钮，当我单击它时该按钮没有响应。它应该做的是警告它刚刚添加到的变量，但它什么也没做。这是我的代码:

$("button#left").click(function(){
    moveLeftId[moveLeftId.length]="-=50px";
    alert(moveLeftId);
});


$("button#start").click(function(){
    alert("You clicked action!");
    var i;
    for (i = 0; i < moveLeftId.length; i++) {
        $("div#test").animate({
           marginLeft: moveLeftId[i]
        }, 500);
    }
    for (i = 0; i < moveTopId.length; i++) {
        $("div#test").animate({
            marginTop: moveTopId[i]
        }, 500);
    }
});
/*
$("button#top").click(function(){
    moveTopId[moveTopId.length]="+=50px";
});marginTop: moveTopId[i]*/

#test {
    width: 100px;
    height: 100px;
    background-color: #C00;
    margin-left: 500px; 
    margin-top:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" color="white">Hi</div>
<button id="left">Left add</button>
<button id="start">Action!</button>
<button id="top" onclick="moveTopId[moveTopId.length]='-=50px';
    alert(moveTopId);">Top add</button>
<script>var moveLeftId=new Array(["-=50px"]);
    var moveBottomId=new Array(["-=50px"]);</script>

如您所见，我尝试将一些代码分离到其他脚本标记中，但这并没有什么区别。我不知道我应该做什么!

提前致谢!

Answer 1

$("button#left").click(function(){
    moveLeftId[moveLeftId.length]="-=50px";
    alert(moveLeftId);
});


$("button#start").click(function(){
    alert("You clicked action!");
    var i;
    for (i = 0; i < moveLeftId.length; i++) {
        $("div#test").animate({
           marginLeft: moveLeftId[i]
        }, 500);
    }
    for (i = 0; i < moveTopId.length; i++) {
        $("div#test").animate({
            marginTop: moveTopId[i]
        }, 500);
    }
});
/*
$("button#top").click(function(){
    moveTopId[moveTopId.length]="+=50px";
});marginTop: moveTopId[i]*/

#test {
    width: 100px;
    height: 100px;
    background-color: #C00;
    margin-left: 500px; 
    margin-top:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" color="white">Hi</div>
<button id="left">Left add</button>
<button id="start">Action!</button>
<button id="top" onclick="moveTopId[moveTopId.length]='-=50px';
    alert(moveTopId);">Top add</button>
<script>var moveLeftId=new Array(["-=50px"]);
    var moveBottomId=new Array(["-=50px"]);var moveTopId =new Array(["-=50px"]);
</script>