Saltar al contenido

Use varias etiquetas de secuencias de comandos para evitar errores

<!DOCTYPE html>

<html lang="en">



    <meta charset="UTF-8" />

    <meta name="viewport"


                         initial-scale=1.0" />

    <title>Multiple script tag</title>


        .common {

            width: 200px;

            height: 60px;

            margin: 20px;

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

            border-radius: 15px;

            font-size: large;

            color: white;



        #btn1:hover {

            background-color: royalblue;



        #btn2:hover {

            background-color: royalblue;



        .createdDynamic {

            display: block;

            color: red;

            font-size: larger;

            width: 300px;

            height: 100px;

            margin-left: 20px;

            background-color: lightgray;






    <button id="btn1" class="common">Say Hello</button>

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


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

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


        // added an event listener on the btn1 

        // that will display the message

        btnEle.addEventListener("click", function (e) {


            // Here we are creating an element to 

            // put the text message on the web page

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


            // giving class to created span

            createELe.className = "createdDynamic";


            // putting the content inside the span 

            createELe.textContent =

                "Hello, This article is contributed for"+

                "geeksforgeeks by Prince Kumar";


            //   appending span into the div element having id container







    <button id="btn2" class="common">Remove</button>


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


        // added an event listener on btn2 that help us to remove

        // the message from the span

        buttonEle.addEventListener("click", function (e) {

            alert("Do you really want to remove the message");

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

            if (getContainer.textContent != "") {

                getContainer.textContent = "";