PDA

View Full Version : passing variables in Javascript

rulian
03-22-2006, 02:26 AM
Hello All

I'm a PHP programmer new to javascript but not new to programming.
My problem is I'm using javascripts along side of CSS.

I have an tables identified by individual numbers that I need to change color when clicked. So I use a javascript to do so and it works fine. However, if I want to click on another table to select it and unselect the other table which is already highlighted I cannot do so without specifing which table is selected. I could do this very easily in PHP but setting a variable of the tablenumber that is currently selected. However, I'm not sure how to accomplish this in javascripts.

so basically here is my diagram

<java script here>

<body>

<table id=1 class='selected'>
<table id =2 class='unselected'> - I need two variables here, I can obviously get the table id for id 2, but how can I pass the tableid of the current table along to the script.

</body>
rulian
03-22-2006, 02:38 AM
actually i could solve the problem if you guys can answer me this question. Is it possible to utilize variables from javascripts like in PHP? for example:
in a javascript I set a variable

var boo = hoo;


then down in my html can I call it so that it outputs a value like

<table id='tableid' oldid=<script boo>
hessodreamy
03-22-2006, 12:48 PM
Actually I don't think it needs to be that difficult.

If you set a global variable at the top of your script:
var currentSelectedTable
Then, when you handle the event of selecting a table, you can unselect the old one, and replace it with the current clicked one:

like so:

function doClick(clickedTable)
{
clickedTable.className='selected';
currentSelectedTable.className='unselected';
currentSelectedTable= clickedTable;
}

Something Like that should work.
rulian
03-22-2006, 02:47 PM
okay, that sounds good, but how would i pass the variable through the function.
here is the function as it stands:

<script language="JavaScript">
function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}
</script>

this is how I call it from the OnClick:
onClick=change("tableid", "selectcss")

on each table generated I generate a name based on numbers through php
so table names would be something liek

table01
table02

so each table has its own OnClick to pass thru the function.

does the OnClick line need to hold the variable for the clicked table?
hessodreamy
03-22-2006, 03:20 PM
what element are you applying the onclick to? the table? or a hyperlink?
rulian
03-22-2006, 03:22 PM
table
hessodreamy
03-22-2006, 03:50 PM
OK. you could leave off passing the new classname. Let the function work it out. Otherwise you wouldn't be able to switch between selected states more than once for a table, if you get my drift. Passing more variables means more for you to type!

Pass the table id to the fucntion, let it work out and assign the new class, then swap the state of the previously selected table, and assign the current table to the previously selected variable:

<script language="JavaScript">
var previousSelected;

function change(id) {

identity=document.getElementById(id);

//get new classname
identity.className= (identity.className='selected')? 'unselected' : 'selected';

//set current as selected, and swap old one out
if(previousSelected != null) document.getElementById(previousSelected).className = 'unselected';
//though it may be 'undefined' rather than null, I'm not sure

previousSelected = id;

}
</script>


and call it from the OnClick:
onClick=change("tableid")
hessodreamy
03-22-2006, 04:11 PM
A more object-orientanted way to go (though if php is your bag then you're maybe not that familiar with such methods :) ) is to pass a reference (or handle) to the element, rather than the id of the element. Like so:

<script language="JavaScript">
var previousSelected;

function change(identity) {

//take this line out as we already have reference to the element
//identity=document.getElementById(id);

//get new classname
identity.className= (identity.className='selected')? 'unselected' : 'selected';

//set current as selected, and swap old one out
if(previousSelected != null) previousSelected.className = 'unselected';
//though it may be 'undefined' rather than null, I'm not sure

previousSelected = identity;

}
</script>

and in your onclick:

onClick=change(this)

'this' is a term in object orientated languages to pass a reference to the current object, which would be whatever element calls the function. So passing 'this' from the table's onclick passes a reference to the table. If you passed 'this' from a hyperlink within the table, 'this' would only have passed a reference to the hyperlink and would be no good to you!

erm... That's it. I seem to have 'gone off on one'. :)
rulian
03-22-2006, 04:19 PM
that worked well,
thanks alot for your help.
except now I have new problem.

I have two tables nested, placeholder and content
i want to disable's the contents table mouseover when placeholder is selected

can I do if statement in OnClicks?

liek so

OnClick="var1=placeholder.className;
if (var1 !== "selected") change("tableid");
hessodreamy
03-22-2006, 04:59 PM
hmmm...
I'm drawing a 4.45 blank and can't remember off the top of my head if a conditional statement like that would work within the onclick. I don't see why not.

But you'd still have to figure out, when triggering the content table's mouseover, whether the corresponding placeholder is selected.

Here's what I reckon: name your table id's according to whether they are placeholder or content ('placeholder1', 'placeholder2', 'content1','content2' etc...)
this allows easier referencing between the two table types.
So when you trigger the mouseover, it should be easy to see if the placeholder is selected. I'd put it within a function, though, rather than putting the conditional statement within the html. It just makes for cleaner code.

so then:

<script>
function contentMouseOver(id)
{
//get id of parent table by replacing the string 'content' with 'placeholder'
var parentTable = id.replace('content','placeholder');

if(previousSelected==parentTable) return;

//do mouse over stuff....
}
</script>

<table id="placeholder1">
<tr><td>
<table id="content1" onmouseover="contentMouseOver('content1')">
etc...