separating Javascript from HTML

kjmaclean · Mar 3, 2009

I have the following line of code in my HTML, which fires off Javascriot functions. I want to separate the JS from the HTML, but I'm not sure how to do it. Here's the code:

<code><li><a id="activatebutton" class="button1" href="javascript:activateIt();" onmousedown="changeimage(); return true;" ></a></li>
</ul></code>

What is happening is that when the user moves his mouse over the link, the image changes. This is handled by the onmousedown event. I return true from this event, because I want the link to activate and call the activateIt() JS function.
Everything works great, except the JS calls are cluttering up my markup..

How do I separate out the javascript calls from the HTML?
I can use addEventListener for the onmousedown, but how do I get rid of the JS function call on the href attribute?

Any assistance would be appreciated.

vicvirk · Mar 3, 2009

put "javascript:void(0);" in your href and add the js call to the OnClick property:

Code:

<li><a id="activatebutton" class="button1" href="javascript:void(0);" onClick="javascript:activateIt();" onmousedown="changeimage(); return true;" ></a></li>
</ul>

Or you can add a "pageInit" call in your body tag "onLoad" that does something like this:

Code:

<script language="javascript" type="text/javascript">
function pageInit() {
document.getElementById("activatebutton").onclick = function() { activateIt(); }
}

</script>
<body onLoad="pageInit()">
><a id="activatebutton" class="button1" href="javascript:void(0);" onmousedown="changeimage(); return true;" ></a>
</body>

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers

kjmaclean · Mar 4, 2009

Thanks for that.

I probably didn't make myself as clear as I should have.
What I want to do is eliminate all javascript calls from the HTML.
I want to separate out the HTML from the javascript.

So my code ideally would look like this:
<code> <li><a id="activatebutton" class="button1" href="#" ></a></li>
</ul></code>

The onmousedown and the link activation in the href would be done from an external javascript file.

I could do this with a window.onload = someFunction call.
I could use addEvent Listener to deal with the onmousedown call, but I'm not sure how to deal with the link activation.

The link doesn't get activated until the user clicks the button, so if I try to alter the href property in the HTML in the window.onload function, the link gets activated right away.

The code works as it is, but I'm just wanting to separate the javascript calls from my HTML so I don't clutter up my markup.

BillyRayPreachersSon · Mar 7, 2009

I'm still not sure that you're explaining what you need clearly enough, because I'm getting mixed messages from your code & descriptions.

For example, in your first code, you never need the HREF property of the anchor, so my solution would be to remove the A. However in your last post, you make a brief mention that you might want to set the HREF attribute in script.

Do you need to use an anchor element? Would a stylised LI work instead?

Also, setting the HREF property of an anchor will NOT activate that anchor, so I suggest you're either doing something else, or doing something wrong if you are experiencing that behaviour.

P.S. It's [ignore]

Code:

[/ignore], not <code></code>.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

kjmaclean · Mar 7, 2009

Thanks Dan.
I finally managed to solve the problem by calling two event handlers from window.onload.

Code:

window.onload  = setupPage;

function setupPage()
{
    addEvent (document.getElementById('activatebutton'), 'mousedown',changeImage);
	addEvent (document.getElementById('activatebutton'), 'click',activateIt);
	
}

I used Scott Andrew's Add Event function handlers to do this.

By separating the image change code and the activateIt function with 2 separate event handlers, everything worked fine. Now I don't have any Javascript calls cluttering my markup!

Here's what my markup looks like now:

Code:

<li><a id="activatebutton" class="button1" href="#"></a></li>

The activateIt function just opens a new page with the window.open() function.
I need the <a> tag because IE doesn't understand the CSS hover state without it, and thw whole thing starts from a button.

Thanks for your help

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

separating Javascript from HTML

kjmaclean

Technical User

vicvirk

Programmer

kjmaclean

Technical User

BillyRayPreachersSon

Programmer

kjmaclean

Technical User

Similar threads

Part and Inventory Search

Sponsor