Hide DIV element with onclick command

Question

Thanks to anyone who helps me solve this issue.

So the issue is I'm trying to hide an element (by class) with an onclick event using a button. But I am unable to do so.

Here's the code on jsfiddle http://jsfiddle.net/1tpdgrnj/

Here's the code for those who wish to help me here:

HTML:

<div class="box">Hide on button click!!
<button onclick="close();">Close</button>

Javascript:

function close() {
document.getElementsByClassName("box").style.display = 'none';}

UPDATE

Refer to the answer below and to the jsfiddle to see how it's different.

possible duplicate of Javascript onclick hide div

Adam Buchanan Smith
– Adam Buchanan Smith

2015-09-08 18:41:56 +00:00
Commented Sep 8, 2015 at 18:41 — Adam Buchanan Smith
– Adam Buchanan Smith, Commented Sep 8, 2015 at 18:41

Lal · Accepted Answer · 2015-09-08 18:41:29Z

4

See this fiddle

Change your javascript as follows

function myFunction() {
    document.getElementsByClassName("box")[0].style.display = 'none';
}

First change that should be done is, rename your function name, as close is a keyword in Javascript.

Second one is that, document.getElementsByClassName() returns an array and thus to get the first element you should use the index position 0.

According to the docs

The Element.getElementsByClassName() method returns a live HTMLCollection containing all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node.

3 Comments

Saumya Banthia Over a year ago

Thanks so much it worked like a charm. Yup was messed up the whole day. Thanks for the help anyways man.

Lal Over a year ago

Great.. :) Glad that it helped you.. :)

Saumya Banthia Over a year ago

Yup will do. :D Edit: it says I can select after 4 mins.

frank_ivan · Accepted Answer · 2015-09-08 18:50:27Z

0

You can use Jquery

<div class="box">Hide on button click!!
    <button class="close">Close</button>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){
    $(".close").click(function(){
        $(this).parent().hide(); return false;

    });
    });
    </script>

answered Sep 8, 2015 at 18:50

frank_ivan

1235 bronze badges

Comments

kwh71787 · Accepted Answer · 2015-09-08 18:44:40Z

-1

Check this fiddle

You can also do this easily with jQuery.

$("#hide").click(function(){
    $(".box").fadeOut(150);
});

answered Sep 8, 2015 at 18:44

kwh71787

5861 gold badge4 silver badges14 bronze badges

1 Comment

Saumya Banthia Over a year ago

Although the above worked out for me, but thanks for providing an alternative.

Collectives™ on Stack Overflow

Hide DIV element with onclick command

3 Answers 3

See this fiddle

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

See this fiddle

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related