What's the best way to replace links with JS functions?

Question

A pattern that\'s started to show up a lot in one of the web apps I\'m working are links that used to just be a regular a-tag link now need a popup box asking \"are you sure?\"

Answer 1

A class-binding version (no need for inline onclick attributes): link this external < script> after all confirmable controls:

// dangerous - warnings on potentially harmful actions
// usage: add class="dangerous" to ,  or 
// Optionally add custom confirmation message to title attribute

function dangerous_bind() {
    var lists= [
        document.getElementsByTagName('input'),
        document.getElementsByTagName('button'),
        document.getElementsByTagName('a')
    ];
    for (var listi= lists.length; listi-->0;) { var els= lists[listi];
        for (var eli= els.length; eli-->0;) { var el= els[eli];
            if (array_contains(el.className.split(' '), 'dangerous'))
                el.onclick= dangerous_click;
        }
    }
}

function array_contains(a, x) {
    for (var i= a.length; i-->0;)
        if (a[i]==x) return true;
    return false;
}

function dangerous_click() {
    return confirm(this.title || 'Are you sure?');
}

dangerous_bind();

This is a slightly long-winded due to the binding working on submits/buttons as well. Generally though it makes sense to have ‘dangerous’ options you will want to confirm on buttons rather than links. GET requests as fired by links shouldn't really have any active effect.