Кнопка не отвечает

Question

У меня есть кнопка, которая говорит Top Add, которая не отвечает, когда я нажимаю на нее. Предполагается, что он должен указать переменную, которую она просто добавила, но она просто ничего не делает. Это мой код:

$("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

Вы не определили этот массив, так что вы не могли получить array.length, если он не определен.

Ваш скрипт просто должен определить эти переменные в начале.

http://jsfiddle.net/2xybrnrz/

var moveLeftId = []; 
var moveTopId = []; 

$("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"; 
}); 

Answer 2

$("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>

Answer 3

попробуйте добавить свой код в

$(document).ready(function() { 
    // put code here 
}); 

Это потому, что если ваш JS и JQuery Поступают RAN до завершения загрузки страницы ..