Thursday, February 9, 2023
HomeSoftware DevelopmentUtilizing a number of script tags to forestall errors

Utilizing a number of script tags to forestall errors


<!DOCTYPE html>

<html lang="en">

  

<head>

    <meta charset="UTF-8" />

    <meta identify="viewport" 

          content material="width=gadget-width, 

                         initial-scale=1.0" />

    <title>A number of script tag</title>

    <model>

        .frequent {

            width: 200px;

            top: 60px;

            margin: 20px;

            background-color: rgba(0, 0, 255, 1);

            border-radius: 15px;

            font-size: massive;

            shade: white;

        }

  

        #btn1:hover {

            background-color: royalblue;

        }

  

        #btn2:hover {

            background-color: royalblue;

        }

  

        .createdDynamic {

            show: block;

            shade: purple;

            font-size: bigger;

            width: 300px;

            top: 100px;

            margin-left: 20px;

            background-color: lightgray;

        }

    </model>

</head>

  

<physique>

    <button id="btn1" class="frequent">Say Howdy</button>

    <div id="container"></div>

    <script>

        const btnEle = doc.getElementById("btn1");

        const container = doc.getElementById("container");

  

        // added an occasion listener on the btn1 

        // that can show the message

        btnEle.addEventListener("click on", perform (e) {

  

            // Right here we're creating a component to 

            // put the textual content message on the net web page

            const createELe = doc.createElement("span");

  

            // giving class to created span

            createELe.className = "createdDynamic";

  

            // placing the content material contained in the span 

            createELe.textContent =

                "Howdy, This text is contributed for"+

                "geeksforgeeks by Prince Kumar";

  

            //   appending span into the div ingredient having id container

            container.appendChild(createELe);

        });

    </script>

  

    

    

    <button id="btn2" class="frequent">Take away</button>

    <script>

        const buttonEle = doc.getElementById("btn2");

  

        // added an occasion listener on btn2 that assist us to take away

        // the message from the span

        buttonEle.addEventListener("click on", perform (e) {

            alert("Do you actually wish to take away the message");

            const getContainer = doc.getElementById("container");

            if (getContainer.textContent != "") {

                getContainer.textContent = "";

            }

        });

    </script>

</physique>

  

</html>

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments