Mastering JavaScript Functional Programming - Second Edition

Our problem – doing something only once

Let's consider a simple but common situation. You have developed an e-commerce site; the user can fill their shopping cart, and in the end, they must click on a Bill me button so their credit card will be charged. However, the user shouldn't click twice (or more) or they will be billed several times.

The HTML part of your application might have something like this somewhere:

<button id="billButton" onclick="billTheUser(some, sales, data)">Bill me</button>

And, among the scripts, you'd have something similar to the following code:

function billTheUser(some, sales, data) {  window.alert("Billing the user...");  // actually bill the user}

Assigning the events handler directly in HTML, the way I did it, isn't ...