Should We Use Inline Javascript

JavaScript
1

In the last day or so and browsing some unrelated threads today, I see comments saying that we shouldn’t use inline javascript in the html.

So I started wondering what is inline javascript and why shouldn’t we use it in our html :scratch:

From doing a bit of googling I see that inline javascript is typically things like adding event handlers, like onclick, directly to html elements.

So why are people discouraging the use of this type of javascript?

Personally, I prefer to use event handlers directly in html elements provided the associated javascript is strictly 1 line of code, typically calling a function.

for example

 
<input type="button" name="btn_1" onclick="displayText();" />

is perfectly ok imho where

 
<input type="button" name="btn_1" onclick="var msg=document.getElementById('txtMsg').innerHTML; alert('msg')" />

is a no-no :disagree:

I prefer to use event handlers directly in the html because it is then easy to see what events are attached to an element as opposed to going to look for them in most likely external javascript files where they would have been assigned.

Any thoughts or comments?

2

One of the reasons why we shouldn’t use inline event handlers is that it requires us to mix JavaScript code in with our HTML/XHTML code.

Other reasons are that it means cluttering up the HTML code with vast numbers of event handlers, whereas with scripting we can apply event handlers to any parts of the page, and even use a single event handler to handle events across multiple elements.

HTML for the content, CSS for the presentation, and JavaScript for the behaviour. By keeping a separation of behaviour between these parts, we increase their ability to be maintained, and used across a wide range of situations.

This is not to say that inline event handlers are always a bad thing to do. Instead, realise that the use of them becomes a restriction on being able to more flexibly manage and maintain them.

Here’s a useful article on the benefits of separating behaviour and structure

3

interesting discussion in the link and I totally agree 100% in principle with what you say which is consistent with the concept of keeping content-presentation-behaviour separate.

so essentially you’re saying we should keep javascript out of the html just like we should keep css out of the html (which I agree 100% with).

but with javascript, I prefer to “cheat” a bit by including event handlers in the html for the reasons and under the conditions in my original post.

however, if I had the same event handler function in multiple elements then I would assign the even handler functions using javascript so that if I need to change the function name or passed arguments I would only need to do it in one location.

ideally, you are right. the event handlers should be assigned separately in order to keep the html as clean as possible but my “limited” use of event handlers in the html is purely a convenience thing for me.

I hope this is ok :blush:

4

Yes, that’s fine. It comes down to what is easier. Where there are one or two elements with inline events, it may feel easier to place an inline event on them. What happens when they grow to four or five elements though, or ten, or fifty.

At first it’s easier to use inline events, then it becomes mandatory to not use inline because scripting things is just so much easier. It’s where the balance lies which is up for debate.

So we’re left with some questions.

At what point does the pain of inline events cause you to move on to scripted events?
Is the pain of transitioning from inline to scripted worth it?
What is a good-practice technique that can help alleviate the pain?

By reinforcing such good practices, I believe that we’re helping to reduce the number of problems that will be faced.

5

if I had the same event handler function in 2 or more elements then I would definitely use scripted events as described earlier.

yes, in the case decsribed above because if I had to change the function name or passed arguments then I would have to make the changes in 1 location only.

in the case where I had unique event handler functions in any number of elements then at this stage I would say probably not.

stay with inline scripting? :scratch:

6

IMHO if it’s a choice between looking for them in js files or in mark-up, I prefer looking in js files. Well, as long as good naming practice has been followed. I wouldn’t want to back trace var t in function e to element r

Not that I always write clean code. If I’m throwing together a quick POC demo script I’ll short-cut out anything not needed to run the test.

But I try to do everything up to par otherwise, just because it’s less work maintaining things. It’s fine if its only a few files but it gets real tedious and prone to error when the number of files grows.