How to Enable and Disable a Button in JavaScript 🔴🟢
Tags: javascript, webdev, beginners, codenewbie
Published: 2022-01-12 15:34:05

Learn how to enable and disable a button in JavaScript.

---

While creating user interfaces, you may probably want to make them more dynamic and enable or disable a button programmatically.

Before starting, you need to know that all HTML buttons have a property `disabled`. Thanks to it, you can enable or disable a button.

```html
<button id-"mainButton">I'm an enabled button!</button>
<button id-"mainButton" disabled>I'm a disabled button!</button>
```

This article will manipulate the `disabled` property using a short JavaScript code.

![Disabled button using JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1yp29fgybcn0a1zywgq.png)

Let me show you how to do that!

## 1. Create a button in your HTML

The first step is to create a button in your HTML with an `id` property. It will allow you to select it later in the tutorial.

```html
<button id="mainButton">Can you click me?</button>
```

You can also [create this button programmatically in JavaScript](https://herewecode.io/blog/create-button-javascript/) if you prefer!

## 2. Select your button using JavaScript

The first step in your code is to select the button you want to update. You can do it using [the `querySelector` function](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), but we will use the `getElementById` native function because of its simplicity.

It will allow you to target an HTML element based on its `id` property.

```javascript
// Select the button element in your HTML code
const button = document.getElementById('mainButton')
```

## 3. Disable button in JavaScript

As mentioned previously in this article, all HTML buttons have a `disabled` property that you can use to disable or enable a button.

By default, a button's `disabled` property is set to `false`. It means that by default, a button is active.

If you want to disable a button using JavaScript, you can switch this value to `true` once you have created and selected the button (steps 1 and 2).

```javascript
// Disable a button in JavaScript
button.disabled = true // <- Button is disabled
```

## 4. Enable button in JavaScript

Now you know how to disable a button, you can enable it by reverting the `true` value to `false`.

```javascript
// Enable a button in JavaScript
button.disabled = false // <- Button is not disabled
```

## Bonus: How to Disable a Button in JavaScript Based on Condition

Let's go further and create some code that disables the button only if its text matches a condition.

Here is what you will need to know:

- create a button in HTML
- disable a button in JavaScript
- write a condition using JavaScript
- get a button text in JavaScript (you will use [the `innerText` property](https://www.w3schools.com/jsref/prop_node_innertext.asp), but don't worry you will see how to use it below!)

To do so, you can come back to step 1, 2, and 3, except that we disable the button only if the button text is "Can you click me?".

```javascript
// Select the button element in your HTML code
const button = document.getElementById('mainButton')

// Disable the selected button in JavaScript based on a condition
// If the button text is 'Can you click me?'
if (button.innerText === 'Can you click me?') {
  button.disabled = true
}
```

If you execute this code in your browser, the button should be disabled. Now, let's change the condition to another text. For example: `button.innerText === "Click here!"`, refresh your browser, and the button should be enabled.

## Full code to enable and disable a button in JS 👇

```html
<html>
  <head>
    <title>Enable and Disable a Button in JavaScript</title>
  </head>

  <body>
    <button id="mainButton">Can you click me?</button>

    <script>
      // Select the button element in your HTML code
      const button = document.getElementById('mainButton')

      // Disable the selected button in JavaScript based on a condition
      // If the button text is 'Can you click me?'
      if (button.innerText === 'Can you click me?') {
        button.disabled = true
      }

      // If you want to enable the button using JavaScript
      // you can switch back the `disabled` property to `false`
      // button.disabled = false
    </script>
  </body>
</html>
```

---

➡️ I'm starting to tweet more consistently. If you want to get more tips and resources about web development, developer tips, and my journey as a Full-stack Engineer -> [Find me on my Twitter 🐦](https://twitter.com/gaelgthomas/)