JavaScript DOM HTML code explained

The code below is an HTML document with embedded JavaScript code. Let’s go through the code step by step to understand its structure and functionality.

HTML Structure:
- <!DOCTYPE html>: This declaration specifies that the document type is HTML.
- <html>: The <html> element is the root element of an HTML page.
- <head>: The <head> element contains meta-information about the document, such as the title and included stylesheets or scripts.
- <meta>: The <meta> element specifies the character encoding for the document.
- <title>: The <title> element sets the title of the HTML page, which appears in the browser’s title bar or tab.
- <style>: The <style> element is used to define CSS styles for the document.
- <body>: The <body> element contains the visible content of the HTML page.
CSS Styles:
- .btn: This class selector defines the styling for elements with the class name “btn.” In this case, it sets padding, border, display, and margin properties.
- .oput: This class selector defines the styling for elements with the class name “oput.” It sets padding, margin, font size, and color properties.
HTML Content:
- <div id="main">: This <div> element has an id attribute set to “main” and serves as the main container for the page.
- Inputs: Two <input> elements with the names “numA” and “numB” are present. They have initial values of 6 and 33, respectively.
- Buttons: Two <div> elements with ids “btn1” and “btn2” serve as buttons. They have the “btn” class applied to them.
- Output Div: A <div> element with the “output1” id is used to display the output of the JavaScript code. It initially contains the text “nothing.” Another <div> element with the “output2” id is also present but not used in the JavaScript code.
JavaScript Code:
- <script>: The <script> element is used to embed or reference JavaScript code within an HTML document.
- const and let Declarations: Four variables are declared using the const and let keywords: btn1Click, btn2Click, output1, and output2. These variables are assigned references to specific elements in the HTML document using the getElementById method.
- Event Handler Registration: The onclick event handlers are registered for btn1Click using the myFun function. It means that when btn1Click is clicked, the myFun function will be executed.
- myFun Function: This function is defined to handle the click event of btn1Click.
  - It retrieves the value of the input element with the id “numA” using document.getElementById("numA").value and assigns it to the variable a.
  - A variable myContainer is initialized as an empty string.
  - The value of a is then checked using a switch statement.
  - Inside the switch statement, different cases are defined based on the value of a.
  - If a is “0”, “2”, or “7”, the corresponding case is executed, and the value of myContainer is set accordingly.
  - If none of the cases match, the default case is executed, and the value of myContainer is set to “NOTHING HERE”.
  - The value of myContainer is then assigned to the textContent property of output1, which updates the text displayed in the corresponding <div>.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Case_Switch Statement</title>
    <style>
        .btn {
            padding: 5px;
            border: 1px solid black;
            display: inline-block;
            margin: 5px;
        }
        .oput {
            padding: 10px;
            margin: 10px;
            font-size: 18px;
            color: blue;
        }
    </style>
</head>
<body>
    <div id="main">
        A
        <input type"number" name="numA" id="numA" value="6" />
        <br />B
        <input type"number" name="numB" id="numB" value="33" />
        <div>
            <div id="btn1" class="btn">Button 1</div>
            <br />
            <div id="btn2" class="btn">Button 2</div>
        </div> <!--Button Div -->
        <div>Output:
            <div id="output1" class="oput">nothing</div>
            <div id="output2" class="oput">nothing</div>
        </div><!--Output Div -->
    </div> <!--Main Div -->
    <script>
        const btn1Click = document.getElementById("btn1");
        const btn2Click = document.getElementById("btn2");
        const output1 = document.getElementById("output1");
        const output2 = document.getElementById("output2");
        btn1Click.onclick = myFun;
        function myFun() {
           const a = document.getElementById("numA").value;
            let myContainer = "";
            console.log(a);
            switch (a) {
                case "0":
                    myContainer = "ZERO";
                    break
                case "2":
                    myContainer = "TWO";
                    break
                case "7":
                    myContainer = "SEVEN";
                    break
                default:
                    myContainer = "NOTHING HERE";
            }//End Switch statement
            output1.textContent = myContainer;
        } // end function myFun
    </script>
</body>
</html>

Share this:

Related