In this tutorial we will show you the solution of JavaScript display none, the display property is used to hide and show the contents of HTML DOM using javascript.
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.
Step By Step Guide On JavaScript Display None :-
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>
<html>
<head>
<title>DISPLAY NONE</title>
</head>
<body>
<style>
#b{
padding: 2rem;
border: 5px solid rgb(18, 220, 89);
width: max-content;
}
</style>
<center>
<h1>Click Hide Elements</h1>
<div id="b">You can hide/show this box using javascript</div><br>
<button id="btn">Button</button><br><br>
<input type="text" id="inp" placeholder="Enter Name">
<br><br><br>
<button id="dis_n">Hide Elements</button>
</center>
<script>
document.getElementById("dis_n").addEventListener("click",function(){
document.getElementById("b").style.display="none";
document.getElementById("inp").style.display="none";
document.getElementById("btn").style.display="none";
});
</script>
</body>
</html>- <!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.
- Here we defined h1 element with heading text ‘Click Hide Elements’, div element defined with id attribute ‘b’ with text ‘You can hide/show this box using javascript’ and button ‘Button’ defined with id ‘btn’, input element defined with ‘id, placeholder’.
- 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.
Conclusion :-
In conclusion now we are able to know how to use display none in javascript.
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.
I hope this tutorial on JavaScript display none helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
