Your HTML page is a structured static document consisting of various elements. We talk about the Document Object Model (“DOM”). Have a look at Javascript’s onclick() event before you attempt this post.
In this tutorial:
1. Change stuff
You can use JavaScript to change these elements in the page, making your page dynamic. Copy the code below and paste it into an .html file. It contains some pretty standard HTML, notably a paragraph with the id noTechno and a button with an onclick event. The JavaScript contained between the <script> tags is a function that sets the display value of the element with the id noTechno to none, making it invisible.
<html>
<head>
<title>Javascript's DOM manipulation</title>
</head>
<body>
<h1>The DOM</h1>
<p>The DOM is a structured consisting of many elements. We can use Javascript to manipulate these elements.</p>
<p id="noTechno">You don't know me, you're too old, let go<br />
It's over, nobody listen to techno</p>
<button onclick="myNoTechnoFunction();">No Techno!</button>
<script>
function myNoTechnoFunction() {
document.getElementById("noTechno").style.display = "none";
}
</script>
</body>
</html>
2. Find stuff out
You might want to know things about your page. It is essential to know if something exists and what its state is before attempting to change it in any way.
In the code above, before we hide the element, we need to know the state of that element: is it currently displayed or not; we only want to set the display property to none (hidden) if it is currently block (visible) and vice versa. Here is the revised code to do this:
<script>
function myNoTechnoFunction() {
var x = document.getElementById("noTechno");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
The use of the variable 𝚡 is not entirely necessary here: if (x.style.display === "none") { could just as easily be if (document.getElementById("noTechno").style.display === "none") {
3. Altogether now
And the page should now look like this:
<html>
<head>
<title>JavaScript's DOM manipulation</title>
</head>
<body>
<h1>The DOM</h1>
<p>The DOM is a structured consisting of many elements. We can use JavaScript to manipulate these elements.</p>
<p id="noTechno">You don't know me, you're too old, let go<br />
It's over, nobody listen to techno</p>
<button onclick="myNoTechnoFunction();">No Techno!</button>
<script>
function myNoTechnoFunction() {
var x = document.getElementById("noTechno");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
4. Codepen
The Codepen below contains the above code plus two extra lines to change the button text appropriately:
See the Pen Use Javascript to manipulate the DOM by David Fox (@foxbeefly) on CodePen.
References:
- GeeksforGeeks. (2018). Hide elements in HTML using display property. Available at: https://www.geeksforgeeks.org/hide-or-show-elements-in-html-using-display-property/ (Accessed: 6 June 2023).
- W3schools. (no date) How TO – Toggle Hide and Show. Available at: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp (Accessed: 14 June 2023).
- Eminem – Without Me