Enable onclick event with JavaScript

Question

I need to disable all buttons that match by class name and after the function runs, enable them back. I've tried the following but no luck.

let stb = document.getElementsByClassName("btn-st");

for (let i = 0; i < stb.length; i++) {
    stb.onclick = null;
}
// run some additional functions and enable

stb.onclick = true;

What am I missing?

`onclick` is supposed to be a function. The function that will be executed when the button is clicked. If you just set it to `true`, well... when your button gets clicked, "true" will happen. And nothing else. — Jeremy Thille, Oct 31 '21 at 17:32
Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, Oct 31 '21 at 17:35

Spectric · Answer 1 · 2021-10-31T17:39:52.857

0

You need to loop through stb again:

let stb = document.getElementsByClassName("btn-st");

for (let i = 0; i < stb.length; i++) {
    stb[i].onclick = null;
}
// run some additional functions and enable

for (let i = 0; i < stb.length; i++) {
    stb[i].onclick = true;
}

Keep in mind however that setting the onclick attribute to null won't disable the event (see @Jeremy Thille's comment).

If you want to disable a button, you should instead set its disabled property:

let stb = document.getElementsByClassName("btn-st");

for (let i = 0; i < stb.length; i++) {
    stb[i].disabled = true;
}
// run some additional functions and enable

for (let i = 0; i < stb.length; i++) {
    stb[i].disabled = false;
}

edited Oct 31 '21 at 17:39

answered Oct 31 '21 at 17:32

Spectric

30,714
6
20
43

My button actually has an onclick function in the tag, so disabling it doesn't seem to work – santa Oct 31 '21 at 17:44
@santa You can modify `func` to only execute if the button is not disabled. E.g, `if(!this.disabled) { /* code here */ }` – Spectric Oct 31 '21 at 17:48
@santa Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Oct 31 '21 at 18:18

score 0 · Answer 2 · answered Oct 31 '21 at 17:38

So the main two things that are missing is that the document.getElementsByClassName("btn-st"); returns an array so when you first go through and disable the .onclick you would have to do:

let stb = document.getElementsByClassName("btn-st");

for (let i = 0; i < stb.length; i++) {
    stb[i].onclick = null;
}

For the second portion, a couple people have mentioned that setting .onclick = true; doesn't really make sense, so instead you should set the onclick to an unnamed function with the following:

// run some additional functions and enable

for (let i = 0; i < stb.length; i++) {
    stb[i].onclick = function() {
        // do things when this button is clicked
    };
}

Enable onclick event with JavaScript

2 Answers2