Why is it bad practice to use inline Javascript?

The biggest problem with using CSS and Javascript inline is to mix different types of things in one place.

HTML is a markup language for defining abstract elements. CSS is made to define visual styles. Javascript brings dynamic to pages. Putting everything together makes maintenance difficult and creates a lot of confusion.

Although there are some HTML tags that work in formatting, the best practice recommended by 100% of professionals is to separate content from formatting.

Having CSS and Javascript separately helps not only reuse, but forces the developer to better think about what he is doing, ie, to structure the page into "component" species rather than simply repeating the same style and script in every place.

In addition, maintenance is greatly facilitated because when HTML is decoupled from code and style, you can modify the content without changing the formatting and vice versa. The same goes for new content, if they have the same structure as the formatting already exists and the scripts will be easily reusable.

Note: Of course there are other points, such as less use of bandwidth, already mentioned in other ways in other answers. However, there are cases where this is questionable. My goal in this response was to highlight the point that is by far the most critical in the subject, ultimately leading to bugs and inability to maintain.

Disadvantages:

Of course, you can eliminate the problem 1 using includes in your server side language but problem 2 forces the client browser to download the code to each request in the main document.

If the code is a separate .js file, the client's browser decides whether to re-download or use the local cache, which improves the user experience and saves your bandwidth.

But if your project is a single page without new requests, OK, it does not suffer from the problems I listed.