What is the point of using an ID attribute in a script tag?

I found a very novel use for giving ID to a script tag. I had embedded tawk.to script in my website to show its chat widget. The problem is, the widget does not hide when I want to print the page. So you would see the widget repeated on every page in the print preview, often obscuring the page contents!

In order to resolve the problem, I first observed how the widget is added. I found out that the widget is added right after the script tag. But the widget (encased in a div tag) does not have any class, and it has a randomly generated ID which is different each time.

There had to be another way to catch hold of that widget (the div tag) without relying on JavaScript tricks. That's when I learnt that CSS has an "adjacent sibling" or "next sibling" selector, which surprisingly has very decent browser support.

So first, I gave an ID for the script tag.

<script type="text/javascript" id="tawk-to-script">

Then I used the ID and the next sibling selector to apply CSS to the widget.

@media print {
  script#tawk-to-script + div {
    display: none !important;
  }
}

Viola! Problem solved.

I used script id tag in a bookmarklet; I add the script element via Javascript to DOM alongwith a div; then use it; & when/if user clicks the Close button on my added div; I find this script element by ID & delete it from DOM to leave the page as I found it.

They might come in handy when you think of loading scripts lazily. Also, I remember I once used an ID on a script tag to facilitate the changes on meta content, per state change (it was a single page application).

With an ID on a script tag, you can check if on a particular instance, whether a script tag with a particular ID is there in the DOM or not. If it's not there, and if your route requires it to be there, you can load it then (given on certain conditions).

Suppose there's a script that you need to load lazily. Let's take an example of some chat widget. Cases can arise that may tend you to load the chat widget only and only whenever a user happens to click on, say, a chat button.

Here, you'll be lazily loading the chat. So, a possible case out of it can be: "if user clicks on chat button, inject the chat widget js into the DOM".

Simple? Hell yes. But, think about the case when a user clicks on the chat button again. What will happen? The same script would be injected again, but you certainly don't want that to happen, do you?

So, let's say the chat widget js goes into the DOM by:

<script id="chatWidgetScript" src="...whatever..."></script>

A good solution to tackle the "second click" problem on the chat button will be to see if the script already exists in the DOM, and if it does, don't let the same get appended twice into the DOM.

So, your button could be:

<button onclick="loadChatWidget()"> Chat! </button>

And your loadChatWidget() function could be:

loadChatWidget(){
     if(document.getElementById("chatWidgetScript")){
          //chat script is already there in the DOM, no need to load it again.
          return;
     }

     /* 
     if document.getElementById("chatWidgetScript") returns null, this would 
     mean that the chat widget isn't there in the DOM, and you might want to 
     load the same now.
     */

     // LOAD SCRIPT HERE
}

This is just one way of using an ID on a script tag, and it is useful too!