How to Stop Event Propagation with Inline Onclick Attribute in JavaScript?

Why Doesn't onclick="this.disabled=true;" Work in JavaScript?

Last Updated : 22 Nov, 2024

Using onclick="this.disabled=true;" in JavaScript can sometimes fail because the button's action is triggered before it gets disabled. This means the button's default behavior or associated action may still execute.

What Does onclick="this.disabled=true;" Do?

This code disables the button immediately after it is clicked by setting its disabled property to true. Once it disabled, the button cannot be interacted with again unless the property is manually reset to false. It is commonly used to prevent multiple clicks on a button.

How to Fix onclick="this.disabled=true;" Not Working?

To ensure the button disables correctly and prevents its default action, use JavaScript's addEventListener for proper event handling:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Disable Button on Click</title>
</head>

<body>
    <button id="myButton">Click Me</button>
    <script>
        document.getElementById('myButton').addEventListener('click', function (event) {
          // Disable the button
            this.disabled = true; 
           // Prevent default behavior if needed
            event.preventDefault();
            console.log('Button disabled');
        });
    </script>
</body>

</html>

Why This Works:

this.disabled = true;: Disables the button immediately after clicking.
event.preventDefault();: Prevents any default actions (like form submission).

This ensures the button is disabled before any other action occurs.

Why onclick="this.disabled=true;" Doesn't Always Work?

The button's default action (e.g., form submission or another event) gets executed before the disabled property is applied.
JavaScript applies disabled = true after the click event starts, allowing the action to proceed.

How to Stop Event Propagation with Inline Onclick Attribute in JavaScript?

A

anujpaz9pe

Improve

Article Tags :

Similar Reads

How to Use JavaScript: void(0) and onClick?

Using javascript:void(0) in combination with the onClick attribute is a technique used in HTML to create links or clickable elements that perform actions without navigating away from the page. This is common when you want to attach a JavaScript function or event handler to a clickable element but pr

How to Disable Input in JavaScript ?

Disabling input fields in JavaScript is a common task when you want to restrict users from interacting with specific form elements. This can be useful in various scenarios, such as preventing modifications to fields that are conditionally locked or ensuring certain inputs are controlled programmatic

How to Disable Submit Button on Form Submit in JavaScript ?

Forms are a crucial part of web development as they allow users to submit data to a server. However, sometimes we want to customize the behavior of HTML forms and prevent the default behavior from occurring. This allows you to create a more interactive and user-friendly web application. In this arti

How to stop event propagation with inline onclick attribute in JavaScript ?

The stopPropagation() method in the HTML DOM is used to stop an event from propagating (or "bubbling"). This method is particularly useful when using an inline onclick attribute in JavaScript. HTML DOM stopPropagation() Event Method The stopPropagation() method is used to stop propagation of event c

How to use the alert() method in JavaScript ?

In this article, we will learn how to use the alert() method in JavaScript. The alert() method is used to show an alert box on the browser window with some message or warning. We can use it as a message or as a warning for the user. Approach: To show an alert on the browser window, we make a button.

What is Strict Mode and how to enable it in JavaScript ?

The strict mode of JavaScript, introduced in ECMAScript 5, is a mechanism to opt into a restricted version of JavaScript." Strict mode modifies the regular JavaScript semantics in the following ways: Some JavaScript silent errors are eliminated by converting them to throw errors. How to enable stric

How to Create One-Time Events in JavaScript ?

In this article, we are going to learn about one-time events in JavaScript and how we can create them. To perform a task we generally use event listeners in JavaScript. For example, if we need to calculate the sum of two variables, it is done by the click of a button in the DOM. It means we use a cl

How to Disable Textarea using JavaScript?

This article will show you how to disable the textarea using JavaScript. Disabling a textarea using JavaScript can be done by setting the disabled property of the textarea element to true. This prevents the user from editing the content of the textarea. There are some reasons to use disabled textare

How to Disable a Button in JavaScript?

These are the following approaches to Disable and enable a Button in JavaScript: 1. Using the disabled Attribute The code example toggles the 'myButton' state between enabled and disabled using the 'toggleButton'. Clicking the 'toggleButton' triggers the 'toggleButtonState' function, which checks if

How to disable right click on web page using JavaScript ?

Disabling right-click on a web page can be done using the DOM Events. It is a client-side action, and it can be achieved using JavaScript. However, it's important to note that attempting to prevent right-clicking is not a foolproof method for protecting your content, as users can easily bypass it by