How much of JavaScript stops working when an errors occur in some line in the browser?

Question

JS in a web page is composed of multiple tags that load files and execute them or execute the code directly in case of inline tags. Now assuming one of them stops executing on some particular line due to an error, do the other scripts also stop? In other words, the browser action of suspending the interpreting and execution of a piece of code when an error occurs is done on a tag level or the global level?

Answer 1

In other words, the browser action of suspending the interpreting and execution of a piece of code when an error occurs is done on a tag level or the global level?

That depends.

Syntax errors mean the entire script loaded by the given script tag will fail to work, because the code cannot be parsed.

Runtime errors only mean that whatever was happening when the error occurred will have terminated (if it didn't handle the error). But only the job that was actively running when the error occurred is terminated; other code loaded by that same script tag will continue to work.

Example: This code has a syntax error in it, and so none of the code works:

document.getElementById("btn").addEventListener("click", function() {
  console.log("Clicked");
}, false);

// This is the syntax error:
if

Clicking this button doesn't do anything:
<br><input type="button" id="btn" value="Click me">

Whereas this has a runtime error between hooking up the first event handler and hooking up the second. As a consequence, the second handler is never hooked up, but the first continues to work:

document.getElementById("btn1").addEventListener("click", function() {
  console.log("Button 1 clicked");
}, false);

// This is the runtime error:
null.foo();

document.getElementById("btn2").addEventListener("click", function() {
  console.log("Button 2 clicked");
}, false);

<div>Clicking this button works:</div>
<input type="button" id="btn1" value="Button 1">

<div>Clicking this button doesn't do anything:</div>
<input type="button" id="btn2" value="Button 2">

In both cases, that only affects the code loaded by that script element, though, because running that is a job; running the content of any subsequent script element is a new job. So the first and third buttons here work, but the second doesn't, because the third is hooked up by a separate job:

<div>Clicking this button works:</div>
<input type="button" id="btn1" value="Button 1">

<div>Clicking this button doesn't do anything:</div>
<input type="button" id="btn2" value="Button 2">

<div>Clicking this button works:</div>
<input type="button" id="btn3" value="Button 3">

<script>
// First job
document.getElementById("btn1").addEventListener("click", function() {
  console.log("Button 1 clicked");
}, false);

// This is the runtime error:
null.foo();

document.getElementById("btn2").addEventListener("click", function() {
  console.log("Button 2 clicked");
}, false);
</script>

<script>
// Second job
document.getElementById("btn3").addEventListener("click", function() {
  console.log("Button 3 clicked");
}, false);
</script>

Of course, if that subsequent script relied on something in the earlier script that didn't work, well, it's not going to work correctly — but the code will (try to) run.