CODEWITHSUNDEEP
javascriptjquerybuttononclick
I am a registered user
I am a registered user

Reputation: 519

Button is not responding

I have a button that says Top Add that is not responding when I click on it. What it is suppossed to do is alert a variable that it just added to, but it just does nothing. This is my code:

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

As you see, I tried separating some of the code into other script tags, but that didn't make a difference. I don't know what I should do!



Thanks in advance!

Upvotes: 0

Views: 90

Answers (3)

michaelwayman
michaelwayman

Reputation: 196

try adding your code inside

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

This is because if your JS and JQuery are being ran before the page finishes loading..

Upvotes: 0

Shibi
Shibi

Reputation: 1383

You didn't define this array so you could not get the Array.length if he is not defined.

Your script is working just need to define this variables at the start.

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

Upvotes: 1

Gurkan İlleez
Gurkan İlleez

Reputation: 1583

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

Upvotes: 2

Related Questions