Need a little help with an external JavaScript event handler

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Need a little help with an external JavaScript event handler

Post by JAB Creations »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


My original code is this...
[syntax="html"]<a href="#" id="personalaudio" onclick="change('audio', 'promptshow'); change('body', 'body fade'); change('head', 'head fade'); $('#inset04').CloseVertically(500); return false;" 
I'm trying to remove all JavaScript code from the page itself. Here is my not working but best guess at the moment...

Code: Select all

function init28() {

if (document.getElementById('personalaudio')) {
personalaudio.onclick= function(){personalaudio()};
function personalaudio(){change('audio', 'promptshow'); change('body', 'body fade'); change('head', 'head fade'); }
}

} window.onload = init28;
What am I doing wrong here?


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Here is a test case I setup...

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Case</title>
<script type="text/javascript">
//<![CDATA[

// Class Changer
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}

// Class Toggler
function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name == classOne) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}

// Modularized Events
function init28() {
if (document.getElementById('divone')) {
// modularized class changer code goes here
}
if (document.getElementById('divtwo')) {
// modularized class toggler code goes here
}
} window.onload = init28;
////]]>
</script>
<style type="text/css">
a:link, a:visited {color: #fff;}
div {margin: 8px; padding: 8px;}
div.red {background: #a00;}
div.blue {background: #00a;}
</style>
</head>

<body>

<div id="divone" class="red">
<a href="#" id="anchor1" onclick="change('divone', 'blue');">Class Change To Blue</a><span> - </span><a href="#" id="anchor2" onclick="change('divone', 'red');">Class Change To Red</a>
</div>

<div id="divtwo" class="red">
<a href="#" id="anchor3" onclick="toggle('divtwo', 'blue','red');">Toggle between Red and Blue</a>
</div>

</body>
</html>
Post Reply