disable the .click event after the first use

Question

I am trying to adapt this js code to disable the .click event after you click the button. I am a beginner with js and realy only have a basic understanding. I have tried to use an if statement but that didn't work.

here is the js code:

var sec = ["30% ENTER KEYCODE: Thirty", "25% ENTER KEYCODE: Twenty-five", "20% ENTER KEYCODE: Twenty","15% ENTER KEYCOVE: Fifteen","10% ENTER KEYCODE: Ten","5% EMTER KEYCODE: Five"];

var offset = 30;

//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0;

$(document).ready(function(){

    /*WHEEL SPIN FUNCTION*/
    $('#spin').click(function(){

        //add 1 every click
        clicks ++;

        /*multiply the degree by number of clicks
      generate random number between 1 - 360, 
    then add to the new degree*/
        var newDegree = degree*clicks;
        var extraDegree = Math.floor(Math.random() * 360) + 1;
        totalDegree = newDegree+extraDegree;

    var colorIndex = Math.ceil(((totalDegree+30) % 360) / 60) -1;
    var colorPrev = colorIndex == 0 ? 5 : colorIndex - 1;
    var colorNext = colorIndex == 5 ? 0 : colorIndex + 1;

    offset = (extraDegree % 60);
    var result = sec[colorIndex];

    if(offset == 0) {
      result ;
    } else if (offset <= 30) {
      result ;
    } else {
      result ;
    }

    $("#answer").html("Answer: " + result);


        /*let's make the spin btn to tilt every
        time the edge of the section hits 
        the indicator*/
        $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;

            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   

                var aoY = t.offset().top;

                console.log(aoY);



                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 23.89){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);

            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });

            noY = t.offset().top;

        });
    });



});//DOCUMENT READY

here is the original post that I am trying to adapt https://codepen.io/anon/pen/JGwQva

again I am trying to disable the ability to spin the wheel after you click the spin button.

Answer 1

If you only want to use it once there is a one() method that removes listener after first click

Change:

$('#spin').click(function(){

To

$('#spin').one('click',function(){

Answer 2

$('#spin').click(function(){
    clicks ++;
    if (clicks < 1 ) {
     //rest of You code and/or reset clicks variable
    }
}

also, change click to $('#spin').on('click',function(){}

Answer 3

var clicks = 0;
$(function () {
    $('body').on('click', '#spin', function () {
        //
        if (clicks > 0) {
            return false;
        }

        // write code here for first click

        clicks++;
    })
})

Answer 4

There are several hints given by other moderators. Anyways, you may try any of these, lets if this helps.

Simple solution using disabled attribute comes handy.

 $(function() { $('#spin').click(function() { console.log('clicked..', this); $(this).prop('disabled', true); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="spin">Spin</button> 

Solution using $.one .

 $(function() { $('#spin').one('click', function() { console.log('clicked..', this); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="spin">Spin</button> 

Solution using $.on and $.off .

 $(function() { $('#spin').on('click', function() { console.log('clicked..', this); $(this).off('click'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="spin">Spin</button> 

Solution using some class names.

 $(function() { $('#spin').click(function() { if ($(this).hasClass('hold')) { return; } $(this).addClass('hold'); console.log('clicked..', this); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="spin">Spin</button>