Last Updated : Jan 1, 2023
If we want to hide the element set the style display property to ‘none’ otherwise we can set it as ‘block’ which default property value also for elements.
Here we defined more elements those are ‘h1, div, button, input,
button’ for shows any type of elements in html we can hide it by using this property.
In script when Hide Elements button clicks by user at the time ‘addEventListener’ will helps us to loads process.
There we collecting div element, input box element, button element id’s ‘b,inp,btn’ by getElementById() method then we sets those element with style’s display property and value as ‘None’.
It will hides every elements.
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- At last we defined button ‘Hide Elements’ with id ‘dis_n’ for trigger click event when user clicks on it. Above seen elements gone to hidden state when user clicks ‘Hide Elements’ button by using id attributes.
- In script we collects ‘Hide Elements’ by is ‘dis_n’ then which is appends with ‘addEventListener()’ for listen when click event occur. Within that we collecting each elements id ‘b,btn,inp’ then we sets each elements display property to ‘none’ value.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
When we executes program on browser we can see heading, div section, button and input box at last Hide Elements button user needs to click this button then defined elements goes to hidden state.
If you need anyone element only then leave other elements accordingly at both html block and script.