How to change an input type button to "display=none" once clicked using Javascript?

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.

Kris · Accepted Answer · 2012-11-17 14:14:14Z

6

<button onclick="this.style.display='none';">a button</button>

see example: http://jsfiddle.net/uWfYk/

answered Nov 17, 2012 at 14:14

Kris

42.1k9 gold badges78 silver badges103 bronze badges

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

3 Comments

I Hate Lazy Over a year ago

@user1480167: Just add this.style.display="none"; to that code.

nonopolarity Over a year ago

my answer uses attachEvent or addEventListener so that multiple handlers can be used

Kris Over a year ago

@動靜能量's answer looks a lot better than mine, I was just trying to keep it simple here.

nonopolarity · Accepted Answer · 2020-04-11 18:44:31Z

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/

edited Apr 11, 2020 at 18:44

answered Nov 17, 2012 at 14:28

nonopolarity

152k142 gold badges497 silver badges788 bronze badges

4 Comments

I Hate Lazy Over a year ago

Beware of .attachEvent. It will set this to the window in the hideTheButton function. To make it work the same, you need to wrap an anonymous function around the hideTheButton call and invoke it like this: hideTheButton.call(theButton, window.event);

I Hate Lazy Over a year ago

Very close, but get rid of the event parameter for the anonymous handler, and pass window.event to the actual handler. The attachEvent doesn't pass an event object. After that, you've got my +1. :-)

nonopolarity Over a year ago

Ah I see, I saw the Dustin Diaz's version... the first version I used was from the JavaScript Definitive Guide 6th ed, p. 461...

user1480167 Over a year ago

thanks for your elaborate explination, and to everyone else who helped make this one...THANKS

Muthu Kumaran · Accepted Answer · 2012-11-17 14:14:43Z

1

Attach a onclick event to hide and apply style display:none using JS style, see below,

<input type="button" name="btn" value="Hide me" onclick="this.style.display='none'" />

answered Nov 17, 2012 at 14:14

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

Comments

Sameera Thilakasiri · Accepted Answer · 2012-11-17 14:27:27Z

0

http://jsfiddle.net/uWfYk/2/

Using jquery as follows

$("#btn").click(function(){
    //do need full
    $(this).fadeOut();
})

Using pure JS

http://jsfiddle.net/PeM2b/

edited Nov 17, 2012 at 14:27

answered Nov 17, 2012 at 14:17

Sameera Thilakasiri

9,51810 gold badges54 silver badges87 bronze badges

5 Comments

I Hate Lazy Over a year ago

OP didn't mention that jQuery is used, and you don't need to load a large DOM library for simple tasks.

Sameera Thilakasiri Over a year ago

This is just an example how to do it in jQuery, use or not its is upto the developer.

user1480167 Over a year ago

what do i do if i have more than one onclick?

I Hate Lazy Over a year ago

@user1480167: Have you loaded the jQuery library? If not, this code won't work for you.

user1480167 Over a year ago

simple hide button when clicked but it has another onlick where it makes a div appear.

Collectives™ on Stack Overflow

How to change an input type button to "display=none" once clicked using Javascript?

4 Answers 4

3 Comments

Update 2020:

Answer in 2012:

4 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Update 2020:

Answer in 2012:

4 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related