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>neveropen</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"+ "neveropen 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:
