how to disable button using JavaScript addEventListener() method?

Question

I was looking for how to disable button using JS and I find this and it works:

<button id="startbtn" onclick="this.disabled=true; pausebtn.disabled=false; stopbtn.disabled=false;">Start</button>

but I want to disable it using addEventListener() method instead of doing it directly on the html div, but it is not working, is it posible?

let start1 = document.getElementById('startbtn');
        start1.addEventListener('click', start);
        start1.addEventListener('click', this.disabled = true);

Obs: the second line in the code above starts the "start" function which is a cronometer.

Brother58697 · Accepted Answer · 2022-11-23 05:30:32Z

4

You need to pass a callback.

If you didn't already have a reference to the button use the currentTarget property of the event object that gets passed into the callback.

start1.addEventListener('click',() => start1.disabled = true);

edited Nov 23, 2022 at 5:30

answered Nov 22, 2022 at 14:46

Brother58697

3,2282 gold badges8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ruan Mendes Over a year ago

You should update your explanation since you're not using currentTarget 😜 This is easier to read. You would only use currentTarget if you didn't already have a reference or if you wanted to make your handler reusable.

Brother58697 Over a year ago

Haha! Thanks friend. Forgot to update it after the updating the code :)

Moussa Bistami · Accepted Answer · 2022-11-22 14:46:11Z

2

You can use Element.currentTarget.setAttribute(name, value) method more details about the function here.

let start1 = document.getElementById('startbtn');
start1.addEventListener('click', start);
start1.addEventListener('click', (e) => e.currentTarget.setAttribute('disabled', true));

It is tested & working.
let me know if you have any issues with the snippet above.

answered Nov 22, 2022 at 14:46

Moussa Bistami

1,1078 silver badges17 bronze badges

Collectives™ on Stack Overflow

how to disable button using JavaScript addEventListener() method?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related