Deactivate the button upon click using alternative methods besides the disable attribute

Question

Deactivate the button upon click using alternative methods besides the disable attribute

I am trying to implement functionality with 3 buttons: 'click me', 'disable', and 'enable'. When the 'click me' button is clicked, it triggers an alert. However, when the 'disable' button is clicked, it should disable the 'click me' button and change its background color. Similarly, clicking the 'enable' button should enable the 'click me' button and revert the background color back to its original state. I want to achieve this without using the 'disabled' attribute.

To get a better understanding of what I am aiming for, please refer to this GIF:

Although I attempted to use pointercancel, it did not produce the desired results.

function disableButton() {
  var a = document.getElementById('clickme');
  a.addEventListener("pointercancel", function() {})
}

function enableButton() {
  var b = document.getElementById('clickme');
  b.addEventListener("pointerover", function() {
    b.style.backgroundColor = '#E2343F';
  })
}

<div class="container">
  <button id="clickme">Click Me</button>
  <div class="">
    <button onclick="disableButton()" class="disable">Disable Button</button>
    <button onclick="enableButton()" class="enable">Enable Button</button>
  </div>
</div>

In addition, I am looking for a way to toggle the ID in order to change the CSS values accordingly.

If someone could assist me in resolving this issue, it would be greatly appreciated.

javascript

Answer 1

Answer №1

Here is a simple solution that should do the trick:

.no-click {
    pointer-events: none;
}

To implement this, just apply the "no-click" class to your desired element in your user interface:

<button class="no-click">

UPDATE: If you prefer to toggle the functionality rather than simply disabling it:

function disableButton() {
  var button = document.getElementById('clickme');
  button.style.pointerEvents = 'none';
}

function enableButton() {
  var button = document.getElementById('clickme');
  button.style.pointerEvents = '';
  button.addEventListener("pointerover", function() {
    button.style.backgroundColor = '#E2343F';
  })
}

Answer 2

Here is a simple solution that should do the trick:

.no-click {
    pointer-events: none;
}

To implement this, just apply the "no-click" class to your desired element in your user interface:

<button class="no-click">

UPDATE: If you prefer to toggle the functionality rather than simply disabling it:

function disableButton() {
  var button = document.getElementById('clickme');
  button.style.pointerEvents = 'none';
}

function enableButton() {
  var button = document.getElementById('clickme');
  button.style.pointerEvents = '';
  button.addEventListener("pointerover", function() {
    button.style.backgroundColor = '#E2343F';
  })
}

Answer 3

Answer №2

There is a method to control button functionality by utilizing event listeners.

const showAlert = () => alert('Hi');

const addListener = () => {
  const btn = document.querySelector('#clickme');
  clickListener = btn.addEventListener('click', showAlert);
  btn.classList.remove('disabled');
};

document.addEventListener('DOMContentLoaded', () => {
  addListener();
  
});

function disableButton() {
  const btn = document.querySelector('#clickme'); 
  document.querySelector('#clickme').removeEventListener('click', showAlert);
  btn.classList.add('disabled');
}

function enableButton() {
  addListener();
}

button {
  cursor: pointer;
}

#clickme {
  background-color: #E2343F;
}

#clickme.disabled {
  cursor: auto;
  background-color: grey;
}

<div class="container">
  <button id="clickme">Click Me</button>
  <div class="">
    <button onclick="disableButton()" class="disable">Disable Button</button>
    <button onclick="enableButton()" class="enable">Enable Button</button>
  </div>
</div>

Answer 4

There is a method to control button functionality by utilizing event listeners.

const showAlert = () => alert('Hi');

const addListener = () => {
  const btn = document.querySelector('#clickme');
  clickListener = btn.addEventListener('click', showAlert);
  btn.classList.remove('disabled');
};

document.addEventListener('DOMContentLoaded', () => {
  addListener();
  
});

function disableButton() {
  const btn = document.querySelector('#clickme'); 
  document.querySelector('#clickme').removeEventListener('click', showAlert);
  btn.classList.add('disabled');
}

function enableButton() {
  addListener();
}

button {
  cursor: pointer;
}

#clickme {
  background-color: #E2343F;
}

#clickme.disabled {
  cursor: auto;
  background-color: grey;
}

<div class="container">
  <button id="clickme">Click Me</button>
  <div class="">
    <button onclick="disableButton()" class="disable">Disable Button</button>
    <button onclick="enableButton()" class="enable">Enable Button</button>
  </div>
</div>

Answer 5

Answer №3

Give this a shot...

function deactivateButton() {
  document.getElementById('pressme').disabled = true;
}

function activateButton() {
  document.getElementById('pressme').disabled = false;
}

<div class="wrapper">
  <button id="pressme">Press Me</button>
  <div class="">
    <button onclick="deactivateButton()" class="inactive">Deactivate Button</button>
    <button onclick="activateButton()" class="active">Activate Button</button>
  </div>
</div>

Answer 6

Give this a shot...

function deactivateButton() {
  document.getElementById('pressme').disabled = true;
}

function activateButton() {
  document.getElementById('pressme').disabled = false;
}

<div class="wrapper">
  <button id="pressme">Press Me</button>
  <div class="">
    <button onclick="deactivateButton()" class="inactive">Deactivate Button</button>
    <button onclick="activateButton()" class="active">Activate Button</button>
  </div>
</div>

Deactivate the button upon click using alternative methods besides the disable attribute

Answer №1

Answer №2

Answer №3

Similar questions

Responsive Fullscreen Bootstrap Panel with Highcharts

Conditionally render a div in React with Next.js depending on the value of a prop

Looping through and printing JSON strings

How to Customize the Size and Color of secureTextEntry Inputs in React Native

Emphasize the selected page number

Issue with req.user being Undefined in Node, Express, Passport, and Mongoose

Creating an adaptable grid system in Vue Material

The combination of $.post and $J = jQuery.noConflict() does not seem to be functioning correctly

Having trouble with d3 / svg layering when introducing new nodes overtime

5 Creative Techniques for Manipulating Boolean Variables in If Statements

Switching back and forth between classes prevents the animation from playing continuously, causing it to jump straight to the end

What is the best way to implement function chaining in TypeScript?

Unable to click a button on HTML file

The Express server is set up with CORS enabled, however, it continues to encounter issues when attempting to make asynchronous HTTP requests from

Is JavaScript Gallery Acting Up? Possible Layer Glitch!

Unable to cancel $interval within factory

JQuery table sorter is unable to effectively sort tables with date range strings

Troubleshooting Intel Edison application update issues

Is there a way to asynchronously load multiple textures in three.js using a callback function?

Having trouble with the preview feature when resizing images