Several functions attached to a button

Question

I have a button called "run" and there are 3 fucntions that happen when this run button is clicked. However i think because there are so many functions firing when this button is clicked, it starts to mess up on the 3rd function which does not seem to work.

the first function checks to see if any div that starts with the name "Drop" has the class "wrong", if so then it shows a dialog box appears

code:

    $("#run").click(function() {
  if ($("[id^='Drop']").hasClass("wrong")) {
    $("#Incorrect").dialog("open");
  }
});

the second function checks to see if any of the Divs starting with "Drop" are empty, if there is an empty Div it will show the dialog box

code:

$("#run").click(function(){       
    if ($("[id^='Drop']").is(":empty")){
     $("#Wrong2").dialog("open");
    };
});

the third function will play a video if there are no divs with the class wrong AND if there are no empty divs.

$("#run").click(function(){       
    if ($("[id^='Drop']").not(":empty") && $("[id^='Drop']").not(".wrong")){
     $('#map1').get(0).play();
    };
});

Now both the 1st and 2nd functions are working correctly, however function 3 is not working. The video just ignores the conditions and plays anyway. I need it to only play when the conditions have been met

I know this is a horrible way of setting this all up, I've only recently started working with jquery so if anyone could help me in with i would very much appreciate it.

Just wondering: is there a reason why you need to use 3 separate onclick events instead of doing everything in one place? — hugomg, Apr 21 '15 at 21:47
I've tried getting it all on one place but could never get it to work :( — TryingAtCode, Apr 21 '15 at 21:48
`not` does not return a boolean value, it returns a jquery object so both conditions are going to always evaluate to truthy values. Check their lengths `.not(...).length` or use `is` and combine `.is(".wrong:empty")` — Patrick Evans, Apr 21 '15 at 21:51

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

Welcome to the world of confusing javascript object evaluation!

While regularly, an empty array is falsy, [] && [] (which is what happens when neither of those statements are true) evaluates to true because there are, in fact, two objects.

I'd instead use one of these methods to decide if the two arrays returned from the jQuery selectors are empty or not, then your code will work as intended.

This should work:

if ($("[id^='Drop']").not(":empty").length === 0 && $("[id^='Drop']").not(".wrong").length === 0){
   $('#map1').get(0).play();
};

edited May 23 '17 at 11:58

Community

1
1

answered Apr 21 '15 at 21:58

xavdid

5,092
3
20
32

I tried this and the video no longer plays whenever you click on the run button, however it now does not play full stop :(. if its not empty and hasn't got the class wrong it should play – TryingAtCode Apr 21 '15 at 22:05
1

Could you post a [fiddle](https://jsfiddle.net/) with a boiled down example of your code? it'll make it much easier to track what's wrong. – xavdid Apr 21 '15 at 22:35
I ask because I think we've got it backwards- you might need to change `===` to `!==` for one or both of your predicates. – xavdid Apr 21 '15 at 22:37

renakre · Answer 2 · 2015-04-21T23:35:04.223

0

Please put everything under a single click event and change this

 if ($("[id^='Drop']").not(":empty") && $("[id^='Drop']").not(".wrong")){
     $('#map1').get(0).play();

to this

 $("div[id^='Drop']:not(:empty)").length && !$("div[id^='Drop']").hasClass('wrong') && $('#map1').get(0).play();

Here is a demo: https://jsfiddle.net/erkaner/u4q9435q/1/

edited Apr 21 '15 at 23:35

answered Apr 21 '15 at 21:58

renakre

8,001
5
46
99

sorry erkaner how would i go about doing that..every time I've tried putting it all into a single event it breaks the whole thing – TryingAtCode Apr 21 '15 at 22:08
@TryingAtCode can you try step by step? for example can you take out `!$("div[id^='Drop']").hasClass('wrong') &&` part and see what happens? – renakre Apr 21 '15 at 22:27
hi erkaner i did what you suggested but the code still broke..nothing happened..the dialog boxes wouldn't come up and the video wouldn't play – TryingAtCode Apr 21 '15 at 22:32
@TryingAtCode please see the demo, it is working actually https://jsfiddle.net/erkaner/u4q9435q/1/ – renakre Apr 21 '15 at 23:35

StackSlave · Answer 3 · 2015-04-21T22:51:23.770

0

Try this out:

$('#run').click(function(){
  var drp = $("[id^='Drop']");
  if(drp.hasClass('wrong'))$('#Incorrect').dialog('open');    
  if(drp.is(':empty'))$('#Wrong2').dialog('open');  
  if(drp.find('.wrong:empty').length === drp.find('.wrong').length){
    $('#map1').get(0).play();
  }
});

edited Apr 21 '15 at 22:51

answered Apr 21 '15 at 22:13

StackSlave

10,613
2
18
35

just tried this piece of code and same problem occurs..all 3 functions stop working. Don't know why this happens – TryingAtCode Apr 21 '15 at 22:19
1

There's a missing `if(` . – Roamer-1888 Apr 21 '15 at 22:22
You probably also want some elses in there to ensure that only one of the actions occurs.` – Roamer-1888 Apr 21 '15 at 22:26
Yeah, I'm not saying that what you're trying to do makes any sense, since you're just playing a video if any of them are empty. – StackSlave Apr 21 '15 at 22:40
Think it might be fixed now. – StackSlave Apr 21 '15 at 22:51
If I'm right, then the last condition is just an `else` after the other two. – Roamer-1888 Apr 21 '15 at 22:54

score 0 · Accepted Answer · answered Apr 21 '15 at 23:04

I think it may be as simple as this :

$('#run').click(function(){
    var $drops = $("[id^='Drop']");
    if($drops.is('.wrong')) {
        $('#Incorrect').dialog('open');
    }
    else if($drops.is(':empty')) {
        $('#Wrong2').dialog('open');  
    }
    else {
        $('#map1').get(0).play();
    };
});

Several functions attached to a button

4 Answers4