Question

I have a button that I’m trying to hide once clicked. Also I just don’t want to hide it I want it to style='display:none' once clicked.

Answer 1

Update 2020:

With addEventListener() and querySelector() being supported in all major browsers, it can just be

document
  .querySelector('#the-important-button')
  .addEventListener('click', ev => ev.target.style.display = 'none');

<button id="the-important-button">Click</button>

Answer in 2012:

To make it unobtrusive and work on earlier IE and other modern browsers:

the HTML:

<button id="the-important-button">Submit</button>​

JavaScript:

var theButton = document.getElementById('the-important-button');

function hideTheButton() {
    this.style.display = 'none';
}

function addEvent(target, type, handler) {
    if (target.addEventListener) {
        target.addEventListener(type, handler, false);
    } else if (target.attachEvent) {
        target.attachEvent('on' + type, function() {
            return handler.call(target, window.event);
        });
    } else {
        target['on' + type] = handler;
    }
}

addEvent(theButton, 'click', hideTheButton);

Note that addEvent is a generic function that works well on earlier IE and other modern browsers. You can add other events similar to the last line of code above.

Sample on http://jsfiddle.net/W37Fb/5/