Anyone here know anything about Javascript? I need help!

Electric Rain · Post by **Electric Rain** » Mon Apr 23, 2007 6:21 am

Okay, I'm really tired... it's 7:15AM and I haven't slept yet, so I'll keep this very short. I really need someone's help. Can you tell me why this code isn't working?

Code: Select all

<html>
<head>
<script language="JavaScript" type="text/javascript">

function whichButton() {
var group1Checked 

	for (var i=0; i<document.form.group1.length; i++) {
	
		if (document.form.group1[i].checked) {
		group1Checked = document.form.group1[i].value
		}
		
	}
var group2Checked 

	for (var i=0; i<document.form.group2.length; i++) {
	
		if (document.form.group2[i].checked) {
		group2Checked = document.form.group2[i].value
		}
		
	}
var videoselect = group1Checked + group2Checked;
alert(videoselect);
videoselect.style.display = (videoselect.style.display != 'none' ? 'none' : '' );
}
</script>
</head>
<body>
<form name="form">
<input type="radio" name="group1" value="test1"><br>
<input type="radio" name="group1" value="test2"><br>
<input type="radio" name="group1" value="test3"><br>
<br>
<br>
<input type="radio" name="group2" value="a"><br>
<input type="radio" name="group2" value="b"><br>
<input type="radio" name="group2" value="c"><br>
<input type="Button" onClick="whichButton()" value="What did you check?">
</form>

<div id="test1a" style="display: none">
Test 1 A
</div>
<div id="test1b" style="display: none">
Test 1 B
</div>
<div id="test1c" style="display: none">
Test 1 C
</div>
<div id="test2a" style="display: none">
Test 2 A
</div>
<div id="test2b" style="display: none">
Test 2 B
</div>
<div id="test2c" style="display: none">
Test 2 C
</div>
<div id="test3a" style="display: none">
Test 3 A
</div>
<div id="test3b" style="display: none">
Test 3 B
</div>
<div id="test3c" style="display: none">
Test 3 C
</div>
</body>
</html>

A div should be showing up based on what the two radio button groups' values are. I works correctly for the popup, why not for videoselect.style.display? Anyone that can help me should know what I'm talking about... sorry that I can't put together coherent thoughts right now... Thanks a lot, someone... hopefully...

Post by **bicostp** » Mon Apr 23, 2007 12:31 pm

Probably because you're forcing every <div> tag to hide through CSS.

Instead of all that mess you should use something like document.write to plug the variables into the page.

Post by **gannon** » Mon Apr 23, 2007 12:55 pm

Easy problem, the line should be

Code: Select all

document.getElementById(videoselect).style.display = (document.getElementById(videoselect).style.display != 'none' ? 'none' : '' );

Electric Rain · Post by **Electric Rain** » Mon Apr 23, 2007 1:27 pm

Sweet man! Works great.

I knew it was a simple problem... It's simple code; of course it was a simple problem... it's just that I'm not a very experienced Javascript programmer, if you couldn't tell.

I actually thought about using getElementById, for some reason I guess I thought it wouldn't work. Dunno why...

Oh, and I don't know why I was using

Code: Select all

(document.getElementById(videoselect).style.display != 'none' ? 'none' : '' );

when I didn't want it to toggle... all I needed it to say was

Code: Select all

document.getElementById(videoselect).style.display = 'block'

. Anyway, thanks a lot. Oh, and one more thing, what do you think I'd have to do to make all other divs hide when the one shows up? Wait... actually, I think I can do that myself... Programmer's Notepad, here I come! It's a new day now, IT'S TIME FOR ALL JAVASCRIPT TO BOW DOWN TO ME!!! MWAHAHAHAHAHA!!!

P.S. What do you use for scripting? Out of curiosity?

Electric Rain · Post by **Electric Rain** » Mon Apr 23, 2007 2:04 pm

Electric Rain wrote:Sweet man! Works great. I knew it was a simple problem... It's simple code; of course it was a simple problem... it's just that I'm not a very experienced Javascript programmer, if you couldn't tell. I actually thought about using getElementById, for some reason I guess I thought it wouldn't work. Dunno why...

Oh, and I don't know why I was using
Code: Select all
(document.getElementById(videoselect).style.display != 'none' ? 'none' : '' ); 
when I didn't want it to toggle... all I needed it to say was
Code: Select all
document.getElementById(videoselect).style.display = 'block'
. Anyway, thanks a lot. Oh, and one more thing, what do you think I'd have to do to make all other divs hide when the one shows up? Wait... actually, I think I can do that myself... Programmer's Notepad, here I come! It's a new day now, IT'S TIME FOR ALL JAVASCRIPT TO BOW DOWN TO ME!!! MWAHAHAHAHAHA!!!

P.S. What do you use for scripting? Out of curiosity?

Edit: *sniff sniff* ... WHAAAAAAA!!! I can't figure it out!

Shouldn't it be as simple as adding

Code: Select all

document.getElementsByTagName('div').style.display = 'none';

to the beginning of my function? What is wrong with this?

Edit 2: And I acidentally quoted myself instead of editing! AGH! I SUCK SO BAD RIGHT NOW!!!

Post by **gannon** » Mon Apr 23, 2007 2:27 pm

getElementsByTagName returns an array object, so you should loop through the results. Also, you could use something like a javascript ID array and then loop through that to hide them.

Electric Rain · Post by **Electric Rain** » Mon Apr 23, 2007 2:40 pm

Something like this... I would have thought?

Code: Select all

var divs = document.getElementsByTagName('div')

	for (var i=0; i<divs.length; i++)
	divs[0].style.display = 'none'

That doesn't work either... did I forget a semicolon or something retarded? -_-

Edit: Woah... that's odd... it works... sometimes, but not others... I can't find a pattern to it, though I'm sure there is one... hmm...

Edit 2: W00t! Figured it out! I had to say div, not div[0], and I had to put divs[0].style.display = 'none' in brackets, underneath for (var i=0; i<divs.length; i++). Yay!

Post by **gannon** » Mon Apr 23, 2007 3:03 pm

Might as well ask my javascript question here too

Code: Select all

function section_preview(tmp) {
 id = tmp;
 timeout = setTimeout('request_data()', 500);
}

is what I'd rather use, but the timeout doesn't start the request_data() function, so instead I made a mediator function

Code: Select all

function section_preview(tmp) {
 id = tmp;
 hover_pause();
}
function hover_pause() {
 if (test != true) {
  test = true;
  timeout = setTimeout('hover_pause()', 500);
 } else {
  request_data();
 }
}

Anyway to get around this?

Electric Rain · Post by **Electric Rain** » Mon Apr 23, 2007 3:11 pm

Alright, so that's figured out... but I have some more Javascript problems with a totally different script... I really hope someone can help me with it.

Here it is:

Code: Select all

<html>
<head>

<script language='javascript' type='text/javascript'>
function showDiv(pass)
	{
	var divs = document.getElementsByTagName('div');
	for(i=0;i<divs.length;i++)
		{
		if(divs[i].id.match(pass))
			{//if they are 'see' divs
			if (document.getElementById) // DOM3 = IE5, NS6
				divs[i].style.visibility="visible";// show/hide
			else
				if (document.layers) // Netscape 4
					document.layers[divs[i]].display = 'visible';
				else // IE 4
					document.all.divs[i].visibility = 'visible';
			}
		else
			{
			if (document.getElementById)
				divs[i].style.visibility="hidden";
			else
				if (document.layers) // Netscape 4
					document.divs[i].visibility = 'hidden';
				else // IE 4
					document.all.divs[i].visibility = 'hidden';
			}
		}
	}
</script>
<style type="text/css">
@media screen {body{visibility: visible}}
</style>
</head>

<body>
<input type="button" value="Print1" onclick="javascript:showDiv('print1')">
<input type="button" value="Print2" onclick="javascript:showDiv('print2')">
<input type="button" value="Show all" onclick="javascript:showDiv('')">

<div id="print1">
Print me! I'm the FIRST one!
</div>

<div id="print2">
Print me! I'm the SECOND one!
</div>

<div id="noprint">
Don't print me!
</div>
</body>
</html>

I stole this code, actually, but I edited it a lot. It works fine, but what I need to figure out is basically how to make all of that Javascript apply only to @media print (CSS). What I'm trying to do is pretty much the whole "print a single div" thing. I've seen this question asked many times before... yet it never seems to be answered properly.

I could do it with this code, but the divs would disappear off of the screen too, and I don't want that. As I understand it, the only way to print ONLY a certain part of a page, is to NOT print every other part of the page, (The "Show all" button is purely for testing, btw.) I've done this by making all divs except for the one specified hidden... but again, this applies to print and screen (in CSS terms). Could anyone help me apply this to print only?

Edit: I'm going look at your code now, gannon, and see what I can do. I probably can't help you, though.

Edit 2: Erm... maybe I can help... but can I see the full code? Might make it easier... or not... I dunno... I don't even know how to validate radio buttons.

Edit 3: The whole "timeout = setTimeout" thing... I don't understand... probably because I don't know the rest of the code. But the only difference between your code and this one I just looked up is that they have a semicolon after the function... that's probably not it, but that's what I'd check first.

Electric Rain · Post by **Electric Rain** » Tue Apr 24, 2007 3:50 pm

*bump*

Please? I'm almost done here... I have to get this code up and running for a real estate site I'm working on. (Yeah, I know... it seems like I'd be "smarter" if I was running a real estate site, yes? Well... yeah, no comment I guess. >.>) The other code that I needed help with before was for a different site, actually.

Oh, I fixed up the code a little, too. Got it more how I want it and cleaner... but I still need to figure out how to get it to apply to only print media.
I could probably use onbeforeprint and onafterprint to hide the divs before printing and make them show back up after, but as I understand it, that's an IE proprietary event, right?

Code: Select all

<html>
<head>
<script language='javascript' type='text/javascript'>
function showDiv(divtoshow)
	{
var divs = document.getElementsByTagName('div')

	for (var i=0; i<divs.length; i++){
	divs[i].style.display = 'none'}
document.getElementById(divtoshow).style.display = 'block';
	}
	
function showallDivs()
	{
	var divs = document.getElementsByTagName('div')

	for (var i=0; i<divs.length; i++){
	divs[i].style.display = 'block'}
	}
</script>
</head>

<body>
<input type="button" value="Print1" onclick="javascript:showDiv('print1')">
<input type="button" value="Print2" onclick="javascript:showDiv('print2')">
<input type="button" value="Show all" onclick="javascript:showallDivs()">

<div id="print1">
Print me! I'm the FIRST one!
</div>

<div id="print2">
Print me! I'm the SECOND one!
</div>

<div id="noprint">
Don't print me!
</div>
</body>
</html>