Simple JS if Statement Not Working

Question

I have an if statement that should pop up an alert window if the condition is true, nut nothing happens.

Its like its not getting the value of the variable and yet the variable is being displayed in a div called result.

JS :

$x = 0;

$(window).load(function () {
    $(".DragItem").draggable({
        revert: 'invalid',
        helper: "clone"
    });

    $(".drop1").droppable({
        accept: '#1',
        activeClass: 'DropTargetValid',
        drop: function (ev, ui) {
            var id = $(ui.draggable).attr("id");
            $(ev.target).append(ui.draggable.clone());
            $("#" + id).draggable('disable');
            $x++;
            document.getElementById("result").innerHTML = $x;
        }
    });

    $(".drop2").droppable({
        accept: '#2',
        activeClass: 'DropTargetValid',
        drop: function (ev, ui) {
            var id = $(ui.draggable).attr("id");
            $(ev.target).append(ui.draggable.clone());
            $("#" + id).draggable('disable');
            $x++;
            document.getElementById("result").innerHTML = $x;
        }
    });

    $(".drop3").droppable({
        accept: '#3',
        activeClass: 'DropTargetValid',
        drop: function (ev, ui) {

            var id = $(ui.draggable).attr("id");
            $(ev.target).append(ui.draggable.clone());
            $("#" + id).draggable('disable');
            $x++;
            document.getElementById("result").innerHTML = $x;
        }
    });

    $(".drop4").droppable({
        accept: '.DragItem',
        activeClass: 'DropTargetValid',
        drop: function (ev, ui) {

            var id = $(ui.draggable).attr("id");
            $(ev.target).append(ui.draggable.clone());
            $("#" + id).draggable('disable');
        }
    });
});

if ($x == 3) {
    // code to be executed if condition is true
    alert('Well Done');
} else {
    // code to be executed if condition is false
}

Well, as your if clause is outside your (window).load it is actually executed before it, when your variable's value is still 0 — Laurent S.
– Laurent S., Commented Oct 17, 2014 at 9:17
Your statement is doing exactly what it is told: Check once at startup while it is still 0. You need to either check the condition after each event that changes the value, or using a timer to "poll" the state on a regular basis. — iCollect.it Ltd
– iCollect.it Ltd, Commented Oct 17, 2014 at 9:19
What it the purpose of the code? It is likely you can do this in a much simpler way. — iCollect.it Ltd
– iCollect.it Ltd, Commented Oct 17, 2014 at 9:21

David Hedlund · Accepted Answer · 2014-10-17 09:23:03Z

2

It looks like your condition is only run once, immediately after the droppables have been initiated. Did you intend to put it in a function and call that function in each drop callback?

function checkIfXEqualsThreeYet() {
    if ($x == 3) {
        // code to be executed if condition is true
        alert('Well Done');
    } else {
        // code to be executed if condition is false
    }
}

And your drop callbacks:

$x++;
checkIfXEqualsThreeYet();

You could of course simplify this. One thing to do might be to increment x within the function, i.e. create an incrementXAndCheckIfItEqualsThree(). It might also be the case that you can inspect your DOM and see if your condition is met without using a counter, but I'll leave that to you as only you know your code. The above should help you with the problem at hand, anyway.

edited Oct 17, 2014 at 9:23

answered Oct 17, 2014 at 9:16

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tom Over a year ago

by condition do you mean the if statment?

Tom Over a year ago

I have tried by moving it to its own script tag outside of this one . Same result. I think it needs to be in a while loop ?

Pablo Lozano Over a year ago

No, just put that if in a function and call it every time $X is modified

David Hedlund Over a year ago

@Tom: A while loop would cause it to run constantly, blocking that script execution thread and freezing your browser. You don't want to check if $x==3 all the time, you only want to check it whenever it's changed.

Tom · Accepted Answer · 2014-10-17 09:22:15Z

0

Made the if statament a function and added a button to run the fuction.

<input type="button" onClick="Result()">

function Result(){
if($x == 3) {
    // code to be executed if condition is true
    alert ('Well Done');
} 
else {
    // code to be executed if condition is false
}  
}

answered Oct 17, 2014 at 9:22

Tom

277 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

As a general guide, do not mix attribute based handles with jQuery. It separates the registration from the handler code for no good reason (and does not support multiple handlers).

Collectives™ on Stack Overflow

Simple JS if Statement Not Working

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related