Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Needing some help with innerHTML usage. I want to hide innerHTML when button is clicked and reappear with other button

JAVASCRIPT: function hideme() { var rectangles = document.querySelectorAll("#squarearea div"); for (var i = 0; i < rectangles.length; i++) { rectangles[i].className = "hide"; } } CSS: .hide{ //display: none; visibility: hidden; } I've tried both the display: none; and visibility: hidden option; but both are giving unwanted effects. I have a squarearea that contains rectangles that have innerHTML attached to each of them, which is what I want to hide/show. But using my current methods are making my entire screen disappear. :( I have searched everywhere, any help or direction would be greatly appreciated.

1 Answer

Steven Parker
Steven Parker
231,269 Points

The function "hideme" as shown will make every "div" element disappear that is contained in another element that has an ID value of "squarearea".

Do you have any visible content that is not in one of these "div" elements? Otherwise that might explain the entire page being hidden.

Also, be aware that the CSS rule applies to the "div" element itself and not just to the "innerHTML" property, but offhand I wouldn't expect that to make a difference to your expectations.

If you're still having trouble, please show your HTML code and any other JavaScript and/or CSS to allow a more complete analysis. And when posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.