Javascript Function Prevent Multiple Button or Link Clicks

Javascript Function enableDisableBtnClicked(bDisable, elemClicked, disabledText = null, secondsReEnable = null) to Prevent Double Clicks of Button or Link with Optional .textContent to Display in Disabled State and Optional Number Seconds Until Automatic ReEnable of elemClicked

Home Short:

/* -------------------------------------------------------------------------------------
   to prevent multiple clicks of a button or link (for example prevent more than 1
   click of a submit button)

Parameters:

[bDisable] (true/false) make 'elemClicked' disabled = true or disabled = false
       [elemClicked] the element this function is to be applied to
      [disabledText] optional .textContent to apply to 'elemClicked' while disabled
   [secondsReEnable] optional # seconds until 'elemClicked' is automatically reenabled

Example #1:

let bDisable = true,
        elemClicked = document.querySelector("#linkQuestion");

// disabled 'elemClicked'
   enableDisableBtnClicked(bDisable, elemClicked);

Example #2:

let bDisable = false,
        elemClicked = document.querySelector("#linkQuestion");

// reenable 'elemClicked'
   enableDisableBtnClicked(bDisable, elemClicked);

Example #3:

let bDisable = false,
        elemClicked = document.querySelector("#linkQuestion"),
        disabledText = "Please wait, submitting ...",
        secondsReEnable = 5;

// disable 'elemClicked' changing its .textContent to 
   // "Please wait, submitting ..." and re-enable in 5 seconds
   enableDisableBtnClicked(bDisable, elemClicked, disabledText, secondsReEnable);

------------------------------------------------------------------------------------ */
function enableDisableBtnClicked(bDisable, elemClicked, disabledText = null, secondsReEnable = null) 
{

// helper to prevent the default action
    function preventClick(e) 
    {
        e.preventDefault();
    }

// get the elemClicked element type
    const elType = elemClicked.tagName.toLowerCase();

// handle button and input elements with the 'disabled' property
    if (elType === "button" || elType === "input") 
    {
        elemClicked.disabled = bDisable;
    } 
    else if (elType === "a") 
    {  
        if (bDisable) 
        {
            // disable link interaction
            elemClicked.style.pointerEvents = "none"; 
        } 
        else 
        {
            // enable link interaction
            elemClicked.style.pointerEvents = "auto";
        }
    }

// define styles for link for disabled and enabled
    const styles = {
        a: {
            // disable interaction on disabled links
            disabled:{color:"gray", pointerEvents:"none"},  
            // enable interaction on enabled links
            enabled:{color:"inherit", pointerEvents:"auto"}
        },
    };

// apply styles if the element type is defined
    if (styles[elType]) 
    {
        const state = bDisable ? "disabled" : "enabled";
        Object.assign(elemClicked.style, styles[elType][state]);
    }

// update class names for the status
    const currentStatus = bDisable ? "enabled" : "disabled";
    const newStatus = bDisable ? "disabled" : "enabled";

if (elemClicked.classList.contains(currentStatus)) 
    {
        elemClicked.classList.replace(currentStatus, newStatus);
    }
    else
    {
        elemClicked.classList.add(newStatus);
    }

// handle title change on disable/enable
    if (bDisable)
    {
        if(disabledText)
        {
           elemClicked.dataset.originalTextContent = elemClicked.textContent;
           elemClicked.textContent = disabledText;
        }
        
        elemClicked.style.pointerEvents = "none"; // Disable clicking but allow hover
        
        // user wants to reenable 'elemClicked' after 'secondsReEnable' seconds
        if (secondsReEnable)
        {
            setTimeout(function()
            {
               enableDisableBtnClicked(false, elemClicked);}, secondsReEnable * 1000);
            }
    }

else 
    {
        if(elemClicked.dataset.originalTextContent)
        {
           elemClicked.textContent = elemClicked.dataset.originalTextContent;
        }
         
        // restore normal clicking behavior
        elemClicked.style.pointerEvents = "auto";  
    }

// prevent click on disabled links
    if (elType === "a" && bDisable) 
    {
        elemClicked.addEventListener("click", preventClick);
    } 
    else if (elType === "a" && !bDisable) 
    {
        elemClicked.removeEventListener("click", preventClick);
    }

}
 //=> enableDisableBtnClicked(bDisable, elemClicked, disabledText = null)

source code home