JavaScript - Change two classes with one click

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:

JavaScript - Change two classes with one click

Post by JAB Creations »

Weirdan | 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]


With the below code I can change the class of one element.

However I need to change two classes with a single click using JavaScript.

[syntax="html"]<?xml version="1.0" encoding="iso-8859-1"?>
<!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>example</title>
<style type="text/css">
.hideme {
 display: none;
}
div.example {
 border: #f0f solid 1px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
 //]]>
</script>
</head>

<body>

<div><a href="#" onmouseout="change('example', 'example');">mouseover to bring div back</a></div>

<div class="example" id="example" onmouseover="change('example', 'hideme');">
<span>example</span>
</div>

</body>
</html>

So if you have a link and two divs (and just did something really simple like their associated classes would just change their border or background color) and you clicked the link both divs would change color.


Weirdan | 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
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

Code: Select all

onmouseover="javascript: function($param); function($param);"
just call it twice man?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

I tried...
onmouseout="change('example1', 'example'); && change('example2', 'example');"
...without success.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Ah, nm...
onmouseout="change('signinmenu', 'signin'); change('signin', 'prompt');">
I was thinking I had to use && operator.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

^^
Post Reply