Closed Thread Icon

Topic awaiting preservation: Passing JS Variables Pages that link to <a href="https://ozoneasylum.com/backlink?for=27522" title="Pages that link to Topic awaiting preservation: Passing JS Variables" rel="nofollow" >Topic awaiting preservation: Passing JS Variables\
 
Author Thread
IXIfx
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Feb 2006

 posted posted 02-17-2006 21:57

apparently I've forgotten my password...

I was once I-X-I if memory serves, anywho

the last time I was around the asylum I noticed somebody talking about active desktops, so I started working on one with the intention of teaching myself some JS.

I'm doing fairly well, but I've found myself wanting to write code outside my knowledge base

I'm trying to design a CSS builder, but the way I have it planned I'll be needing to pass variables from one file to another, and I'm not sure how to go about it. right now all I have written for this is the color select table, but I invison having a main page with all the needed variables and the code to output the CSS. I would like to be able to have an input field with a link that opens the color table in a popup and returns the value of the selected color to the input on the main page.

Since I don't have any webspace at the moment, I'll go ahead and post the code I have here (I know it's much easier to give a link, and I wish I could)

code:
<html>
	<head>
	<script language="JavaScript">
	<!--
	var crayola = new Array(
	"000000", "000040", "000080", "0000FF",
	"004000", "004040", "004080", "0040FF",
	"008000", "008040", "008080", "0080FF",
	"00FF00", "00FF40", "00FF80", "00FFFF",
	"400000", "400040", "400080", "4000FF",
	"404000", "404040", "404080", "4040FF",
	"408000", "408040", "408080", "4080FF",
	"40FF00", "40FF40", "40FF80", "40FFFF",
	"800000", "800040", "800080", "8000FF",
	"804000", "804040", "804080", "8040FF",
	"808000", "808040", "808080", "8080FF",
	"80FF00", "80FF40", "80FF80", "80FFFF",
	"FF0000", "FF0040", "FF0080", "FF00FF",
	"FF4000", "FF4040", "FF4080", "FF40FF",
	"FF8000", "FF8040", "FF8080", "FF80FF",
	"FFFF00", "FFFF40", "FFFF80", "FFFFFF"
	);

	function fShowData(ind) {
		alert(crayola[ind]);
	}

	function fBuildTable() {

		var ind=0;
		document.write('<table style="border: 1px solid #000000;">');
		for(y=0;y<=7;y++){
			document.write('<tr>');
			for(x=0;x<=7;x++){
				document.write('<td ' +
				'style="cursor: hand; ' +
				'background: #' + crayola[ind] + '; ' +
				'color: #' + crayola[ind] + 
				'; border: 1px solid #000000;"' +
				' onClick=JavaScript:fShowData(this.innerHTML)>' + ind + 
				'</td>');
				ind = ind + 1;
			}
			document.write('</tr>');
		}
		document.write('</table>');
	}
	-->
	</script>
	</head>
	<body>
		<script language="JavaScript">
			javascript:fBuildTable();
		</script>

	</body>
</html>



note: this code is in test.html and I'm looking for a way to pass the info given from the fShowData function back to a field in index.html

thanks in advance for your help
bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

 posted posted 02-18-2006 02:28

Okay well if this is going to be in a popup.


window.parent <!-- reference back to parent window.

So

function fshowData() {
// where my form is the name of your form and my element is the name of the form field.
window.parent.document.forms.myform.elements.myelement.value = crayola[ind];
}



If you open your popup with

mypopup = window.open( .... etc

you can reference the popup from the parent like so

mypopup.document.something



.:[ Never resist a perfect moment ]:.
bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

 posted posted 02-18-2006 02:29

Also the document.write methods are bad.

You should try using some Dom creation functions.



.:[ Never resist a perfect moment ]:.
IXIfx
Obsessive-Compulsive (I) Inmate

From:
Insane since: Feb 2006

 posted posted 02-19-2006 01:32

thanks for the help, bitdamaged, that should be what I'm looking for
IXIfx
Nervous Wreck (II) Inmate

From: beyond the looking glass
Insane since: Feb 2006

 posted posted 02-20-2006 18:22
code:
function fShowData(ind, myElement) {
	alert(crayola[ind]);
	document.getElementById(myElement).value=crayola[ind];
	window.parent.document.forms.stylesheet.elements.hex.value=crayola[ind];
}
function fBuildTable() {
	var ind=0;
	document.write('<table id="colorTable">');
	for(y=0;y<=7;y++){
		document.write('<tr>');
		for(x=0;x<=7;x++){
			document.write('<td id="colorCell"' +
			'style="background: #' + crayola[ind] + '; ' +
			'color: #' + crayola[ind] +
			'; border: 1px solid #000000;"' +
			' onClick=JavaScript:fShowData(this.innerHTML,"hex")>' + ind +
			'</td>');
			ind = ind + 1;
		}
		document.write('</tr>');
	}
	document.write('</table>');
}



in index.html my form's name is stylesheet and there is an input field named hex

with the fShowData function as it is here, I get an error that looks like this:
'window.parent.document.forms.stylesheet.elements' is null or not an object

I've also tried window.parent.document.getElementById(myElement).value, which at least didn't give me an error, but still doesn't pass the variable to the index page

this is starting to be more of a headache than it's worth to not be getting paid lol

I'm wondering if it could be how I'm calling the popup that's not letting this work

code:
<script language="JavaScript">
	function popWin(url){
		newwindow=window.open(url, 'name', 'height=400,width=275'
			+ ',toolbar=no,status=yes,menubar=no,directories=no'
			+ ',location=no,resizable=yes,scrollbars=auto');
		if (window.focus){
			newwindow.focus()
		}
	}
</script>

<a href="javascript:popWin('test.html')">Background</a>



"You know I'd like to keep my cheeks dry today, so stay with me and I'll have it made" - Shannon Hoon

(Edited by IXIfx on 02-20-2006 18:33)
IXIfx
Nervous Wreck (II) Inmate

From: beyond the looking glass
Insane since: Feb 2006

 posted posted 02-27-2006 19:11

I'm still having troubles with this, is there anything else that I should check?

"You know I'd like to keep my cheeks dry today, so stay with me and I'll have it made" - Shannon Hoon
MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

 posted posted 02-28-2006 18:32

I'm not familiar with the "elements" member as you have it above. But the error you're getting would suggest that there is no such member for the object you've referenced.

The "getElementById" looks to be better, but I notice that in the code you've posted, you're calling on the current document (associated with the popup) and not the parent document (associated with index.html). Also, I assume that the input field in question has id="hex" and that there is only one such element with that id per document.

Posting relevant portions of the html files might help in this regard.

One minor suggestion: I notice that in onclick handler, you use the value of this.innerHTML to get the index of the color which you pass to the fShowData function. Then, inside fShowData function, you do a "lookup" to get the actual hex string for the color. This is double indirection could be avoided by hardcoding crayola[ind] as the first parameter of the fShowData function in the onClick attribute.

For example:

code:
function fShowData(color, myElement) {
	alert(color);
	document.getElementById(myElement).value=color;
	window.parent.document.forms.stylesheet.elements.hex.value=color;
}
function fBuildTable() {
	var ind=0;
	document.write('<table id="colorTable">');
	for(y=0;y<=7;y++){
		document.write('<tr>');
		for(x=0;x<=7;x++){
			document.write('<td id="colorCell"' +
			'style="background: #' + crayola[ind] + '; ' +
			'color: #' + crayola[ind] +
			'; border: 1px solid #000000;"' +
			' onClick=JavaScript:fShowData(crayola[ind],"hex")>' + ind +
			'</td>');
			ind = ind + 1;
		}
		document.write('</tr>');
	}
	document.write('</table>');
}



(Edited by MajorFracas on 02-28-2006 18:34)

« Backwards — Onwards »

Show Forum Drop Down Menu