Topic awaiting preservation: Making variable show up where I want $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8073" title="Pages that link to Topic awaiting preservation: Making variable show up where I want" rel="nofollow" >Topic awaiting preservation: Making variable show up where I want\$

Author	Thread
butcher Paranoid (IV) Inmate From: New Jersey, USA Insane since: Oct 2000	posted 02-10-2002 22:14 First of all, I'm not even sure if I can use a javascript array like I have tried to, please let me know if I can't. I want to change the options in the select box based on the users selection from the radio buttons. My thought is to call the getOptions() function with onLoad from the body tag to get the options for the initial page load. After that I assume it has to be called from the onChange in the buttons. My real question would be how to call the function from one place, and display the results from the function in another place. I thought if I declared the variable "optionDisplay" outside of the function, that made it global and allowed me to use it anywhere. Oh well... Here's the code in question. code: <SCRIPT LANGUAGE="JavaScript"> <!-- var optionDisplay var allOptions = new Array() var content = new Array() var downloads = new Array() var schedules = new Array() content[0] = "<option value=1>Number 1</option><BR>" content[1] = "<option value=2>Number 2</option><BR>" content[2] = "<option value=3>Number 3</option><BR>" allOptions[0] = content downloads[0] = "<option value=4>Number 4</option><BR>" downloads[1] = "<option value=5>Number 5</option><BR>" downloads[2] = "<option value=6>Number 6</option><BR>" allOptions[1] = downloads schedules[0] = "<option value=7>Number 7</option><BR>" schedules[1] = "<option value=8>Number 8</option><BR>" schedules[2] = "<option value=9>Number 9 </option><BR>" allOptions[2] = schedules function getOptions() { var form = document.myForm for (var i = 0; i < form.selectOptions.length; i++) { if (form.selectOptions[i].checked) { for (var j = 0; j < allOptions[i].length; j++) { optionDisplay += allOptions[i][j] } break } } return optionDisplay } //--> </SCRIPT> </HEAD> <BODY onLoad="getOptions()"> <FORM NAME="myForm"> <INPUT TYPE="radio" NAME="selectOptions" VALUE="1" CHECKED onChange="getOptions()">Content<BR> <INPUT TYPE="radio" NAME="selectOptions" VALUE="2">Downloads<BR> <INPUT TYPE="radio" NAME="selectOptions" VALUE="3">Schedules<BR> <SELECT NAME="mySelect"> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write(optionDisplay) //--> </SCRIPT> </SELECT></FORM> </BODY> </HTML> Oh yea! Just in case it's an issue, the option arrays will be generated from a php script that reads in all the files from three different directories and puts together the option tags. BTW, the form is just a throw together for testing. Thanks! -Butcher- [This message has been edited by butcher (edited 02-10-2002).]
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 02-10-2002 22:57 Hmm. It looks like you may be a bit confused about how functions and their return values work. Hmm, this will be a bit hard to explain... function myfunc() { return 5; } alert(3myfunc()); will alert the value "15". The return value of the function replaces where you put the function in the code, so essentially it turned into alert(35); which is 15. Now, what you have right now won't work right, even forgetting about the buttons. You're document.write-ing optionDisplay before the onload function has been called (since the onload function isn't called until the whole page has been parsed, including the document.write statement you put there). Since optionDisplay has no value at this point, you'll document.write nothing. So, for starters, change document.write(optionDisplay); to document.write(getOptions()); and remove the onload event. What this will do, is when the code gets to that point, it will call the getOptions() function, and document.write its return value. Now all that's left is to make the check boxes able to change it. What you have to do is call the function getOptions(), as you're already doing, to get its return value. But then you have to do something with that return value. What you have to do is give the <select> box an ID (such as id="mySelect"... the ID is supposed to match the name). Then, in the onchange event for the radio buttons, say document.getElementById('mySelect').innerHTML = getOptions(); And that should do it. In recent browsers at least.
butcher Paranoid (IV) Inmate From: New Jersey, USA Insane since: Oct 2000	posted 02-11-2002 01:34 Thanks Slime I appreciate the extra effort on the explination. I think I made the changes as you put them to me and I have this: code: </HEAD> <BODY> <FORM NAME="myForm"> <INPUT TYPE="radio" NAME="selectOptions" VALUE="1" CHECKED onChange="document.getElementById('mySelect').innerHTML = getOptions();">Content<BR> <INPUT TYPE="radio" NAME="selectOptions" VALUE="2" onChange="document.getElementById('mySelect').innerHTML = getOptions();">Downloads<BR> <INPUT TYPE="radio" NAME="selectOptions" VALUE="3" onChange="document.getElementById('mySelect').innerHTML = getOptions();">Schedules<BR> <SELECT NAME="mySelect" ID="mySelect"> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write(getOptions()); //--> </SCRIPT> </SELECT></FORM> The page loads fine with the first three options in the box, but when I make a change to the radio button, nothing shows in the box at all. Here's the head part of the script again in case you need it: code: <SCRIPT LANGUAGE="JavaScript"> var optionDisplay var allOptions = new Array() var content = new Array() var downloads = new Array() var schedules = new Array() content[0] = "<option value=1>Number 1</option><BR>" content[1] = "<option value=2>Number 2</option><BR>" content[2] = "<option value=3>Number 3</option><BR>" allOptions[0] = content downloads[0] = "<option value=4>Number 4</option><BR>" downloads[1] = "<option value=5>Number 5</option><BR>" downloads[2] = "<option value=6>Number 6</option><BR>" allOptions[1] = downloads schedules[0] = "<option value=7>Number 7</option><BR>" schedules[1] = "<option value=8>Number 8</option><BR>" schedules[2] = "<option value=9>Number 9 </option><BR>" allOptions[2] = schedules <!-- function getOptions() { var form = document.myForm for (var i = 0; i < form.selectOptions.length; i++) { if (form.selectOptions[i].checked) { for (var j = 0; j < allOptions[i].length; j++) { optionDisplay += allOptions[i][j] } break } } return optionDisplay } //--> </SCRIPT> Thanks again -Butcher-
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 02-11-2002 06:20 I'm not sure why it's not working. Make sure your function is working correctly. If it is, you may have to use a separate method other than innerHTML to change the select box.

Topic awaiting preservation: Making variable show up where I want\$

Author

Thread

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted 02-10-2002 22:14

First of all, I'm not even sure if I can use a javascript array like I have tried to, please let me know if I can't.

I want to change the options in the select box based on the users selection from the radio buttons. My thought is to call the getOptions() function with onLoad from the body tag to get the options for the initial page load. After that I assume it has to be called from the onChange in the buttons.

My real question would be how to call the function from one place, and display the results from the function in another place. I thought if I declared the variable "optionDisplay" outside of the function, that made it global and allowed me to use it anywhere.

Oh well... Here's the code in question.

code:

<SCRIPT LANGUAGE="JavaScript">

<!--

var optionDisplay

var allOptions = new Array()

var content = new Array()

var downloads = new Array()

var schedules = new Array()



content[0] = "<option value=1>Number 1</option><BR>"

content[1] = "<option value=2>Number 2</option><BR>"

content[2] = "<option value=3>Number 3</option><BR>"

allOptions[0] = content 



downloads[0] = "<option value=4>Number 4</option><BR>"

downloads[1] = "<option value=5>Number 5</option><BR>"

downloads[2] = "<option value=6>Number 6</option><BR>"

allOptions[1] = downloads



schedules[0] = "<option value=7>Number 7</option><BR>"

schedules[1] = "<option value=8>Number 8</option><BR>"

schedules[2] = "<option value=9>Number 9 </option><BR>"

allOptions[2] = schedules 



function getOptions() {

	var form = document.myForm

	for (var i = 0; i < form.selectOptions.length; i++) {

		if (form.selectOptions[i].checked) {

			for (var j = 0; j < allOptions[i].length; j++) {

				optionDisplay += allOptions[i][j]

			}

			break

		}

	}

	return optionDisplay

}

//-->

</SCRIPT>

	

</HEAD>



<BODY onLoad="getOptions()">

<FORM NAME="myForm">

	<INPUT TYPE="radio" NAME="selectOptions" VALUE="1" CHECKED onChange="getOptions()">Content<BR>

	<INPUT TYPE="radio" NAME="selectOptions" VALUE="2">Downloads<BR>

	<INPUT TYPE="radio" NAME="selectOptions" VALUE="3">Schedules<BR>

	<SELECT NAME="mySelect">

	<SCRIPT LANGUAGE="JavaScript">

	<!--

	document.write(optionDisplay)

	//-->

	</SCRIPT>

	</SELECT></FORM>





</BODY>

</HTML>

Oh yea!

Just in case it's an issue, the option arrays will be generated from a php script that reads in all the files from three different directories and puts together the option tags.

BTW, the form is just a throw together for testing.

Thanks!

-Butcher-

[This message has been edited by butcher (edited 02-10-2002).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 02-10-2002 22:57

Hmm. It looks like you may be a bit confused about how functions and their return values work. Hmm, this will be a bit hard to explain...

function myfunc() {
return 5;
}

alert(3*myfunc());

will alert the value "15". The return value of the function replaces where you put the function in the code, so essentially it turned into

alert(3*5);

which is 15.

Now, what you have right now won't work right, even forgetting about the buttons. You're document.write-ing optionDisplay before the onload function has been called (since the onload function isn't called until the whole page has been parsed, including the document.write statement you put there). Since optionDisplay has no value at this point, you'll document.write nothing.

So, for starters, change

document.write(optionDisplay);

to

document.write(getOptions());

and remove the onload event. What this will do, is when the code gets to that point, it will call the getOptions() function, and document.write its return value.

Now all that's left is to make the check boxes able to change it. What you have to do is call the function getOptions(), as you're already doing, to get its return value. But then you have to do something with that return value. What you have to do is give the <select> box an ID (such as id="mySelect"... the ID is supposed to match the name). Then, in the onchange event for the radio buttons, say document.getElementById('mySelect').innerHTML = getOptions();

And that *should* do it. In recent browsers at least.

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted 02-11-2002 01:34

Thanks Slime

I appreciate the extra effort on the explination.

I think I made the changes as you put them to me and I have this:

code:

</HEAD>



<BODY>

<FORM NAME="myForm">

	<INPUT TYPE="radio" NAME="selectOptions" VALUE="1" CHECKED onChange="document.getElementById('mySelect').innerHTML = getOptions();">Content<BR>

	<INPUT TYPE="radio" NAME="selectOptions" VALUE="2" onChange="document.getElementById('mySelect').innerHTML = getOptions();">Downloads<BR>

	<INPUT TYPE="radio" NAME="selectOptions" VALUE="3" onChange="document.getElementById('mySelect').innerHTML = getOptions();">Schedules<BR>

	<SELECT NAME="mySelect" ID="mySelect">

	<SCRIPT LANGUAGE="JavaScript">

	<!--

	document.write(getOptions());

	//-->

	</SCRIPT>

	</SELECT></FORM>

The page loads fine with the first three options in the box, but when I make a change to the radio button, nothing shows in the box at all.

Here's the head part of the script again in case you need it:

code:

<SCRIPT LANGUAGE="JavaScript">

var optionDisplay

var allOptions = new Array()

var content = new Array()

var downloads = new Array()

var schedules = new Array()



content[0] = "<option value=1>Number 1</option><BR>"

content[1] = "<option value=2>Number 2</option><BR>"

content[2] = "<option value=3>Number 3</option><BR>"

allOptions[0] = content 



downloads[0] = "<option value=4>Number 4</option><BR>"

downloads[1] = "<option value=5>Number 5</option><BR>"

downloads[2] = "<option value=6>Number 6</option><BR>"

allOptions[1] = downloads



schedules[0] = "<option value=7>Number 7</option><BR>"

schedules[1] = "<option value=8>Number 8</option><BR>"

schedules[2] = "<option value=9>Number 9 </option><BR>"

allOptions[2] = schedules 

<!--

function getOptions() {

	var form = document.myForm

	for (var i = 0; i < form.selectOptions.length; i++) {

		if (form.selectOptions[i].checked) {

			for (var j = 0; j < allOptions[i].length; j++) {

				optionDisplay += allOptions[i][j]

			}

			break

		}

	}

	return optionDisplay

}

//-->

</SCRIPT>

Thanks again

-Butcher-

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 02-11-2002 06:20

I'm not sure why it's not working. Make sure your function is working correctly. If it is, you may have to use a separate method other than innerHTML to change the select box.