Inline Javascript

Inline Javascript is javascript that is within the HTML syntax on a webpage, and it is awesome. Below we use an example of a link that runs some javascript to show how it works. Using inline Javascript has it’s pros and cons, but my fave pro is it doesn’t need script tags, it’s easy to understand, doesn’t need placement and it just works.

Here’s the basic link we will be using to show inline Javascripting at work:

<a>Link text</a>

Now if you place that inside a HTML page it will just make a simple link that does nothing.

Here’s how we add the javascript to what’s called an onclick event. Onclick just means: when this is clicked do this javascript.

<a onclick="javascript:YOUR JAVASCRIPT HERE" href="#">link text</a>

Here’s the code currently on the Skimfeed main page that changes the background color using a Javascript link. Take a look and you’ll see just how simple this is. You might be wondering why I’ve made this guide to inline Javascript here. It’s as a reminder to myself for next time I need it

<a href="#" style="font-size:14px;" onclick="javascript:if(document.bgColor!=”#000000″;){document.bgColor = “#000000”;document.body.style.color = “#ffffff”;}else{document.bgColor = “#ffffff”;document.body.style.color = “#000000”;}">change colors</a>

This code will not win any prizes! It’s not clean and clear Javascript code, but it works. It’s a good example of just how the onclick function of Javascript can be used in a live setting to run some simple code. Simple code shouldn’t need script tags and 10 lines of code or consideration of placement. It just works.

Note: Don’t copy and paste that coed above! it won’t work because the “” tags are not the basic ones. I have no idea why wordpress changes them, but you’ll have to retype.

Also note that the above code contains an inline CSS script within the link too (the style= part)! This changes the font to size 14 for the link. Not how it does not interfere with the inline javascript code.