I hate divs and javascript [Resolved]

**ober0330** · Jul 22nd, 2004, 12:46 PM

Everytime I do this, it doesn't work. All I'm trying to do is toggle between 2 divs.

Script:

Code:

function toggle() { 
// DOM3 = IE5, NS6 
document.getElementById('div1').style.visibility = 'visible'; 
document.getElementById('div2').style.visibility = 'hidden'; 
} 

function toggle2() { 
// DOM3 = IE5, NS6 
document.getElementById('div1').style.visibility = 'hidden'; 
document.getElementById('div2').style.visibility = 'visible'; 
}

Call to them:

PHP Code:


echo "<br><br><input type=radio name=opt value=1 onclick='toggle()'>Specify Test";

        echo "<input type=radio name=opt value=1 onclick='toggle2()'>Specify Cell<br>";

        echo "<div id=div1 style=visibility:visible>testtesttesttest</div>";

        echo "<div id=div2 style=visibility:hidden>test2test2test2test2test2</div>";

IT WON'T WORK AND I MIGHT PULL MY HAIR OUT.

**Acidic** · Jul 22nd, 2004, 01:30 PM

PHP Code:




echo "<br><br><input type='radio' name='opt' value=1 onclick='toggle()'>Specify Test";

        echo "<input type='radio' name='opt' value=1 onclick='toggle2()'>Specify Cell<br>";

        echo "<div id='div1' style='visibility:visible;'>testtesttesttest</div>";

        echo "<div id='div2' style='visibility:hidden;'>test2test2test2test2test2</div>";

There. Now you've got correct HTML.

I didn't test it at all, but try it now. I'd also re-wriet the JS code so that you only need one function.

Code:

//untested
function toggle_div() {
d1= document.getElementByID('div1')
d2= document.getElementByID('div2')
if (d1.style.visibility == 'visible')
    {
    d1.style.visibility = 'hidden'
    d2.style.visibility = 'visible'
    }
else
    {
    d2.style.visibility = 'hidden'
    d1.style.visibility = 'visible'
    }
}

just thought of something, toggle might be a keyword, change the name of the function. Also, what is the error you get?

**ober0330** · Jul 22nd, 2004, 01:39 PM

No dice

It doesn't give me an error. The only thing it does when I click the other option is the status bar says "Script Error!" for a brief second. Is there a way to get some sort of JS debugger?

**Acidic** · Jul 22nd, 2004, 01:43 PM

urgh. IE.
In IE you can double click on that little yellow triangle for a slightly better error report.

**ober0330** · Jul 22nd, 2004, 01:44 PM

Well, I'm mainly using Opera, but that doesn't give me anything. And the other browser is MyIE2, which doesn't give me the triangle.

**Acidic** · Jul 22nd, 2004, 01:46 PM

Use Firefox.
OK, here's what I'd do. Shove all the JS in an external file, then try to validate your page. Once the HTML is valid, then the JS should definately work.

Note that since you're using PHP you might have to upload the file before you can validate it as otherwise there is no server to run the PHP.

**ober0330** · Jul 22nd, 2004, 01:51 PM

The JS is already in an external file.

edit: It won't validate a php file.

**Acidic** · Jul 22nd, 2004, 01:52 PM

good, then just make it validate.

**ober0330** · Jul 22nd, 2004, 01:55 PM

In case you missed it, that validator does not work with php files.

**ober0330** · Jul 22nd, 2004, 02:34 PM

AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH!!!!!!!

Ok, here's a test file:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
    <SCRIPT type="text/javascript" SRC="../js/toggle2.js"></SCRIPT>
</head>

<body>
<br><br><input type='radio' name='opt' onclick='tog_div'>Specify Test
<input type='radio' name='opt' value='test' onclick='tog_div'>Specify Cell<br>
<div id='div1' style='visibility:visible'>testtesttesttest</div>
<div id='div2' style='visibility:hidden'>test2test2test2test2test2</div>


</body>
</html>

The contents of the js file are the function you gave me, only with a slight name change.

The file validates as good html. When I run it in IE and the event fires it says "Object expected on line 10", which is the line right after the body.

Any ideas??

**techgnome** · Jul 22nd, 2004, 03:13 PM

Originally posted by ober0330
In case you missed it, that validator does not work with php files.

You hear that? That's the BS alarm.... IT will validate PHP files, trust me.... it does an HTTP GET which causes the server to run the PHP and serve up the resulting HTML....

But, that asside... your HTML still has some problems....
You open your input tags, but never close them, which means you end up with two div tags inside an input tag, which is then inside the other input tag! That's what the javascript error is.... because of the nested tags, the div tags aren't where they should be.

TG

**CornedBee** · Jul 23rd, 2004, 02:54 AM

What it won't do is to accept PHP files you directly upload to the validator.

techgnome, in HTML you can't and need not close <input> and similar tags (br, img, param, embed...)

**brown monkey** · Jul 23rd, 2004, 04:17 AM

getElementById. small letter d

**ober0330** · Jul 23rd, 2004, 08:08 AM

Originally posted by techgnome
You hear that? That's the BS alarm.... IT will validate PHP files, trust me.... it does an HTTP GET which causes the server to run the PHP and serve up the resulting HTML....

But, that asside... your HTML still has some problems....
You open your input tags, but never close them, which means you end up with two div tags inside an input tag, which is then inside the other input tag! That's what the javascript error is.... because of the nested tags, the div tags aren't where they should be.

TG

Echo CornedBee. I uploaded the file and it couldn't handle it. I can't use the URL to the site because it's an intranet site.

And where did you learn HTML? There are no closing tags for input!

**ober0330** · Jul 23rd, 2004, 08:15 AM

Ok... oddly, it didn't like the fact that I was linking to the js file. I copied the script into the page and now it works.

All that work for THAT!?

Anyways... it's over.

**CornedBee** · Jul 23rd, 2004, 09:39 AM

Hmm... path problem? Sounds like the js file wasn't loaded.

**ober0330** · Jul 23rd, 2004, 10:16 AM

I don't know... I checked the path and everything. It all seemed to be fine and I've used this method on other pages where it worked great. I don't know... it's a small function and it'll only go on this page probably, so I guess I'll just leave it.

I don't know why it wasn't loading it tho... and that bothers me.

**Acidic** · Jul 23rd, 2004, 12:21 PM

I used to make the mistake of putting <script></script> onto the .js file as well as in the HTML document. you didn'y do that did you?

**ober0330** · Jul 23rd, 2004, 12:46 PM

Thanks for the tip.

Thread: I hate divs and javascript [Resolved]

Thread Tools

Display

I hate divs and javascript [Resolved]

Posting Permissions