Skip to content
Related Articles
Open in App
Not now

Related Articles

Using multiple script tags to prevent errors

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 24 Jan, 2023
Improve Article
Save Article

In this article, we will see how can we use multiple <script> tags inside the HTML code to prevent from getting errors. To understand this concept, we will first see what kind of error we usually get on the console and then how that can be removed from the code by adding multiple script tags. 

Example: The below code example illustrates an error that we can get while not adding the multiple script tag.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                         initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <style>
        .common {
            width: 200px;
            height: 60px;
            margin: 20px;
            background-color: rgba(0, 0, 255, 1);
            border-radius: 15px;
            font-size: large;
            color: white;
        }
    </style>
</head>
  
<body>
    <button id="btn1" 
            class="common">
            Button1
    </button>
    <script>
        const btn1 = 
            document.getElementById("btn1");
        const btn2 = 
            document.getElementById("btn2");
        btn1.addEventListener("click", function (e) {
            alert("Btn1 is pressed");
        });
        btn2.addEventListener("click", function (e) {
            alert("Btn2 is pressed");
        });
    </script>
    <button id="btn2" 
            class="common">
            Button2
    </button>
</body>
  
</html>


Output: 

Error Image

Explanation: The button having id btn1 is found in the script, whereas, the button having id btn2 is not found in the script because it has not been created above <script> tag. For this, the button having id btn1 event Listener is working correctly.

The above error that we are getting, can be removed by adding multiple script tags. Although, there are a few points that should be kept in mind while adding the multiple script tag:

  • Before adding the script tag, the element we are accessing inside the <script> tag should be present above the <script> tag.
  • Multiple <script> tags should be only used inside the body tag, & not anywhere else.

Syntax of Adding multiple script tag:

<html>

<head>
</head>

<body>
    ...
    <script>
            // Your Javascript code here
    </script>
    
    ...
    <script>
            // Your javascript code here
    </script>
    ...
</body>

</html>

Example: In this example, we have used the multiple <script> tags for performing different tasks in which we have created two buttons and added the event listener on both buttons where one button on click displays the message on the web page while the other on click removing the message from the web page giving an alert message.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                         initial-scale=1.0" />
    <title>Multiple script tag</title>
    <style>
        .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;
        }
    </style>
</head>
  
<body>
    <button id="btn1" class="common">Say Hello</button>
    <div id="container"></div>
    <script>
        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
            container.appendChild(createELe);
        });
    </script>
  
    <!-- Create a button to remove the displayed message 
    by the btn1  -->
    <button id="btn2" class="common">Remove</button>
    <script>
        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 = "";
            }
        });
    </script>
</body>
  
</html>


Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!