- November 9, 2019
- Posted by: AppsDish
- Category: Start Up
In this tutorial, I walk through two methods you could use to change the content of a webpage by manipulating the Document-Object Model (“DOM”) in response to user click events.
Here’s what we’re looking to achieve:
- On the load of a page, a user should see a button that says “Show Dog”
- When the button is clicked, an
<img> element should be toggled on and appear on the page. The text of the button should also toggle to “Hide Dog”
- When the button that now says “Hide Dog” is clicked, the
<img> element should be toggled off and the text of the button should toggle back to “Show Dog”
In the head of our document on line 4, we link to an external styles sheet, which will set the CSS for our image when our page loads.
index.js which contains the code that responds to a user’s click event.
Line 9 defines the
<button> element that we plan to target.
Line 13 defines the
<img> element that we want to show and hide. The id of this image is set to
We want the
<img> element that we’re targeting to be initially hidden until a user clicks a button. We can achieve this by setting the element’s
display property on our style sheet.
On lines 1–3, we use the CSS id selector,
#, to target the element with an id of
dog-pic and set its
display property to
none. These styles will be applied when the page loads
Here’s where the magic happens.
The code below uses two different techniques to toggle our
<button> elements in response to a user click.
The first technique uses a global variable and control flow to hide and unhide our image.
The second technique uses the key-value pairs of an object to cycle between the two options for the text — “Show Dog” and “Hide Dog” — that should be displayed on our button.
Let’s walk through the code, step-by-step:
On line 1 we use the
.querySelector() method on the
document object to grab the first HTML element that we’re targeting—the
<img> element with an
dog-pic— and save it to a variable,
On line 2, we again use the
.querySelector() method to grab the
<button> element and save it to the variable
On line 4, we add an event listener to the button that listens for a
click event. When the
click event is fired by a user clicking the button, an anonymous callback function gets invoked, which first executes the expression defined on line 6,
showDog = !showDog.
This expression flips the current Boolean value of the
showDog variable defined on line 17, which our anonymous callback function has access to through the global scope.
showDog’s initial value is set to
false, so the first time this callback function is invoked by a user clicking the button, the expression
showDog = !showDog causes
showDog = falseto be flipped to
showDog = true.
After the value of the
showDog variable gets flipped, the
if/else statement on lines 7 to 11 then execute one of two blocks, depending on the current value of the
showDog is equal to
true, then the code on line 8,
dogPic.style.display = "inline-block” is executed. This sets the value of the
display property of the
<image> element to
inline-block, which overrides the
<image>’s initial value of
display: none that was set in our external style sheet. By changing the value of the
display property, we unhide our hidden image.
showDog is equal to
false, then the code on line 10,
dogPic.style.display = "none”, is executed. This sets the value of the
display property back to
none, re-hiding the image.
The reason we’re able to toggle between showing and hiding the image using this technique is because inline styles, i.e. styles defined in HTML on the DOM, override styles defined in external style sheets.
Remember, our external style sheet sets the the image’s display property to
display : none; setting on our style sheet, thereby unhiding the image.
To better illustrate this point, below is a .gif of what’s happening on the DOM when the user clicks the button.
style= “display: inline-block”, which overrides the external styles and unhides the image. (3) When the image is visible, pressing the button again re-hides the image by setting the inline style to style= “display: none”
Line 13 demonstrates the second toggling technique, which uses the key-value pairs of the
buttonStates object defined on line 19 to set the inner text of the button after each click.
buttonStates object has both possible button inner-text values—“Show Dog” and “Hide Dog”—as keys, each of which has the alternative button inner-text value as its corresponding value.
When the page loads and the dog is hidden, the initial inner-text of our button is “Show Dog”. Upon clicking the “Show Dog” button, steps 1 -4 run, unhiding the image.
Then, the current value of the button inner-text gets passed as a key to the
buttonStates object. If
button.innerText is currently “Show Dog” on the DOM, then
buttonStates[button.innerText] evaluates to
buttonStates["Show Dog"] , which then returns the value “Hide Dog,” changing the value of the button inner-text on the DOM.
button.innerText is currently “Hide Dog,” then
buttonStates[button.innerText] returns “Show Dog, ”resetting the value of the button inner text.