How to make this button behavior using pure Javascript?

Question

I'd like to make this button have this behavior.

• Clicked
• Disabled the button
• Do something
• Enabled the button
• Alert success text.

The script should be inline . This is my current button script.

<button type="button" onclick="this.disabled=true;savemain();this.disabled=false" class="btn btn-success">Simpan</button>

Answer 1

This approach is considered bad practice. It's better to use traditional DOM event handlers or DOM Level 2 Event Listeners.

Answer 2

Using inline javascript

<button type="button" onclick="this.disabled=true;savemain();this.disabled=false;alert('success');" class="btn btn-success">Simpan</button>

 function savemain(){ console.log('doing stuff'); } 

 <button type="button" onclick="this.disabled=true;savemain();this.disabled=false;alert('success');" class="btn btn-success">Simpan</button> 

Or use an addEventListener instead and it should do the trick.

document.getElementById('buttonId').addEventListener('click', function(event){
  this.disabled = true;
  savemain();
  this.disabled = false;
  alert('success');
}, false);

I don't really suggest using inline JavaScript.