Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Erik Nuber
Erik Nuber
20,629 Points

Keep something from clicking. Having issues.

Given the following...

html

 <div class="anyClass">

            <ul>
                <li data-wedge="1"></li>
                <li data-wedge="2"></li>
                <li data-wedge="3"></li>
                <li data-wedge="4"></li>  
            </ul>  
</div>

and the JS

function enableButtons() {
    "use strict";
    if (buttonsPressable) {
        $('.anyClass').on('click', '[data-wedge]', function (e) {
            testClick(e);
        });
        $('.anyClass').on('mousedown', '[data-wedge]', function (e) {
            makeIt(e);
        });
        $('.anyClass').on('mouseup', '[data-wedge]', function (e) {
            removeIt(e);
        });
    } else if (!buttonsPressable) {
        $('.anyClass ul li').on('click', '[data-wedge]', function (e) {
            e.preventDefault();
        });
    }
}

I am trying to prevent a series of li tags from being clicked if buttonsPressable is false.

I can't seem to figure out why it isn't working. I have tried off() as well. I have tested to make sure that I am getting into the 'else if' statement as well as into the actual click where the e.preventDefault() is both with success but; though I'm in the correct area the button is still doing the action.

Looking for fresh eyes because I think I may be missing something fairly simple.

I am using a strict mode and, I realize a function should be function() but the software I am using expects a space between the function ().

David Bath
David Bath
25,940 Points

Which event is firing, and which function is getting triggered?

Erik Nuber
Erik Nuber
20,629 Points

on click a function called testClick() gets done. However I am trying to prevent that at certain times. My full JS is 213 lines thus far so trying to just give what is actually pertinent so it isn't overwhelming.

The other two functions are being called on mouse down and then again on mouse up. All of that is working just fine, it is preventing the li from getting pressed.

I have also tried the following so that the <li> cant be clicked but that doesn't seem to do the job either.

$('.anyClass').off('click', '[data-wedge]');
David Bath
David Bath
25,940 Points

You could try adding return false after the e.preventDefault() line.

Erik Nuber
Erik Nuber
20,629 Points

Thank you for the suggestion, I've tried that too without success.

David Bath
David Bath
25,940 Points

Then I'd suggest checking for the value of buttonsPressable inside the testClick() function.

2 Answers

David Bath
David Bath
25,940 Points

I think there might be some confusion. When you set buttonsPressable to true and then call the enableButtons function, it is attaching events to the elements. When you set it to false and then call buttonsPressable again, those events are still attached to the elements! All you are doing is adding the preventDefault to it, but still it looks to me like testClick should fire.

You could try to remove the event handlers, but if I were doing this I would have the buttonsPressable variable accessible throughout the game, and then within each function check for the value of that variable. If buttonsPressable is false, do nothing (or return false), otherwise trigger the action.

Erik Nuber
Erik Nuber
20,629 Points

Gotcha! That might work. Thanks.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I've not done a good job explaining this...

It starts with a function that begins a game. Within that, buttonsPressable becomes true and the function enableButtons() is called. So now the li tags are able to be pushed. Up to that point you can't click on anything.

When the game is over, I set buttonsPressable to false and call the function enableButtons() again with the goal of having nothing able to be pushed until the game is restarted.

I have thoroughly tested with the console.log that I am getting everywhere I need as well as the value of buttonsPressable but, the end result is not happening.

Maybe my logic is what is actually incorrect.