This article is a fifth post to the series of introducing HTML to beginners. This post outlines three different approaches for changing a background color of a Hello World page on a button click. All of the examples are valid ways of achieving the same result.
HTML document contains the following elements/functions from the sample HTML:
- Display the text ‘Hello, World!’.
- Display the buttons ‘Make Night’ and ‘Make Day’.
- When ‘Make Night’ is clicked, the background colour turns black.
- When ‘Make Day’ is clicked, the background colour turns white.
Entire project using all 3 approaches is available online on Plunker: https://embed.plnkr.co/jrs4Fttigjx6HNPjuiWl/
When an HTML document is initialized in a browser, it becomes a document object. ‘The document object is the root node of the HTML document and the “owner” of all other nodes: (element nodes, text nodes, attribute nodes, and comment nodes)’ (Document Object, 2016). For this exercise, I’ve decided to use document.Body method on style.Background property, which allows me to set the document’s body (<body>) element’s background color.
I’ve first created the simple project structure that includes a single HTML file and a single cascading style sheet.
The color code is passed into the document.body.style.Background property as a variable on click event from a button input type. The ‘Make Night’ button is passing black color to the changeBackgroundColor function, whereas the ‘Make Day’ button passes white color to function. Function itself in turn sets the body element’s background color property to one of the colors passed to it on an onclick event.
Cascading Style Sheet is contained in style.css file, and is kept to a minimum code:
As you can see, I’ve set the primary body background color of the document to white color (this could have been omitted because that the default color), but for the consistency of the approach, I’ve decided to define it.
H1 tag, on the other hand, is just set to a particular font (Verdana in this case) and defaulting to ‘serif’ if Verdana font isn’t present. The color of H1 element is set to red, as per the requirement.
This is unchanged from the Example 1
There are many ways to accomplish the task of changing background. Just for the illustration, I’ve decided to use yet one more technique to accomplish the same result. And that is by using a jQuery. For this project, it’s an overkill, but I just wanted to show yet another way of achieving the same result.
In jQuery, it’s possible to access the DOM element body tags by name and inject the CSS right to them. This is what the solution would look like in jQuery: $(body’).css(‘background’, ‘white’);
This is what the code implementation looks like. Jquery is listening to click event on two of the buttons and depending on which ID of the button is clicked; it’ll switch the background to a predefined color. In my example, I’ve left .first() method in the tag, but that’s only for the reference, when we may have more tags using the same ID (note: that won’t happen in case of BODY tag)
Please note the head meta section, where I am loading jQuery from one of the currently available content delivery networks. The list is available as reference: (jQuery, 2016). That is how I’ve initialized minified version of the jQuery, albeit I could have included its JS files and link it into the document, both methods work for the purposes of this assignment.
I’ve decided to give it a try and implemented entire functionality by using Event Listener, that simply listens to a click event I put on the button.
As you can see, I’ve wrapped the click event listeners into window.onload=function, without this code would not execute before the DOM is fully loaded.
And in HTML it was as easy as simply insert two buttons, I didn’t even have to insert them as input buttons, they could have been just simple <button> tags.
In any case, I’ve updated my Plunker at: https://embed.plnkr.co/jrs4Fttigjx6HNPjuiWl/
The code supports 4 different and unique methods to achieve the same goal now:
Chaudhary, M. and Kumar, A. (2015) Practical jQuery. University of Liverpool: Springer Science + Business Media.
Onclick Event (2016) Available at: http://www.w3schools.com/jsref/event_onclick.asp (Accessed: 19 November 2016).
Foundation, jQuery (2016) JQuery CDN – latest stable versions. Available at: https://code.jquery.com/ (Accessed: 19 November 2016).
Get Element By Id (2016) Available at: http://www.w3schools.com/jsref/met_document_getelementbyid.asp (Accessed: 19 November 2016).
Document Object (2016) Available at: http://www.w3schools.com/jsref/dom_obj_document.asp (Accessed: 19 November 2016).