JavaScript not working, need help

M

Manfred Kooistra

I have a problem with some JavaScript code not working. I'm sure I've
done something obviously stupid, but I can't for the live of me figure
it out. Can someone please help?

This is the XHTML document (stripped to the relevant parts):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="switch.js"></script>
</head>
<body>
<div id="one" style="display: block;">content</div>
<div id="two" style="display: none;">content</div>
<div><a href="#" onclick="switch(); return false;">Switch</a></div>
</body>
</html>

and this is the JavaScript file switch.js:

function switch() {
document.getElementById('one').style.display = 'none';
document.getElementById('two').style.display = 'block';
}

Can you see the problem?
 
E

Evertjan.

Manfred Kooistra wrote on 24 jan 2007 in comp.lang.javascript:
I have a problem with some JavaScript code not working. I'm sure I've
done something obviously stupid, but I can't for the live of me figure
it out. Can someone please help?

This is the XHTML document (stripped to the relevant parts):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="switch.js"></script>
</head>
<body>
<div id="one" style="display: block;">content</div>
<div id="two" style="display: none;">content</div>
<div><a href="#" onclick="switch(); return
false;">Switch</a></div>
</body>
</html>

and this is the JavaScript file switch.js:

function switch() {
document.getElementById('one').style.display = 'none';
document.getElementById('two').style.display = 'block';
}

Can you see the problem?
Click to expand...

Do not start with a js in a separate file,
you do not even know if it is loaded.
Do not use tabs on usenet.
Do not the XML crap that is not partinent to your Q.
Do not say "not working" but show us the errorcode and errorline number.

And you/we will see, that "switch" must be a reserved word.

Try:

function mySwitch() {
 
M

Manfred Kooistra

Thanks, Evertjan. I changed the file to this:

<html>
<head>
<script language="javascript" type="text/javascript">
//<![CDATA[
function mySwitch() {
document.getElementById('one').style.display = 'none';
document.getElementById('two').style.display = 'block';
}
//]]>
</script>
</head>
<body>
<div id="one" style="display: block;">content</div>
<div id="two" style="display: none;">content</div>
<div><a href="#" onclick="mySwitch(); return false;">Switch</a></div>
<body>
</html>

There is no error message, it simply does nothing.
 
M

Manfred Kooistra

Sorry, there is an error code.

I changed the file to HTML 4 Transitional with:

<script language="javascript" type="text/javascript">
<!--
function mySwitch() {
document.getElementById('one').style.display = 'none';
document.getElementById('two').style.display = 'block';
}
// -->
</script>

and the error message tells me that "mySwitch is not defined" and point
me to line 1, which reads: "<html>".

Any ideas?
 
M

Manfred Kooistra

Changes everything back to XHTML, and now it works fine. Strange. I
still have no idea, what the problem was ...
 
O

Osmo Saarikumpu

Manfred said:
<div id="one" style="display: block;">content</div>
<div id="two" style="display: none;">content</div>
Click to expand...
There is no error message, it simply does nothing.
Click to expand...

It does, but it's not obvious because both divs have the same content.
Change the contents e.g.:

<div id="one" style="display: block;">content 1</div>
<div id="two" style="display: none;">content 2</div>

and you'll see some difference.
 
E

Evertjan.

Manfred Kooistra wrote on 24 jan 2007 in comp.lang.javascript:
Thanks, Evertjan. I changed the file to this:
Click to expand...

[please always quote on usenet]
<html>
<head>
<script language="javascript" type="text/javascript">
//<![CDATA[
Click to expand...

Why this CDATA stuff?? Leave it out!!!!!!!!!
function mySwitch() {
document.getElementById('one').style.display = 'none';
document.getElementById('two').style.display = 'block';
}
//]]>
</script>
</head>
<body>
<div id="one" style="display: block;">content</div>
<div id="two" style="display: none;">content</div>
<div><a href="#" onclick="mySwitch(); return false;">Switch</a></div>
<body>
</html>

There is no error message, it simply does nothing.
Click to expand...

It would SHOW(!!!) nothing as "content" is the same as "content"!

Try this:

=========== test.html ================
<div id="one" style="display: block;">content: 1</div>
<div id="two" style="display: none;">content: 2</div>

<a href="#" onclick="mySwitch(); return false;">Switch</a>

<script type='text/javascript'>
function mySwitch() {
document.getElementById('one').style.display = 'none';
document.getElementById('two').style.display = 'block';
}
</script>
=======================================

You see you do NOT need any header for this testing,
at least in IE and FF.

Preferably, IMHO, use a button,
an anchor is for linking:

<button onclick='mySwitch();'>Switch</button>
 
E

Evertjan.

Manfred Kooistra wrote on 24 jan 2007 in comp.lang.javascript:
Sorry, there is an error code.
Click to expand...
I changed the file to HTML 4 Transitional with:
Click to expand...

Thas sould have no influence.
<script language="javascript" type="text/javascript">
Click to expand...

Do not use language="javascript", it has been deprecated for many yesrs.
<!--
Click to expand...

Same for <!--

function mySwitch() {
document.getElementById('one').style.display = 'none';
document.getElementById('two').style.display = 'block';
}
// -->
Click to expand...

and for // -->
</script>

and the error message tells me that "mySwitch is not defined" and point
me to line 1, which reads: "<html>".
Click to expand...

So, you have made an unrelated error in your code, Manfred.
 
E

Evertjan.

Manfred Kooistra wrote on 24 jan 2007 in comp.lang.javascript:
Changes everything back to XHTML, and now it works fine. Strange. I
still have no idea, what the problem was ...
Click to expand...

Again:

1 Please always quote on usenet, this is not email,
others want to read it too,
and not all news servers are current with older mails of a thread.

2 Please share the code [minimal] that maks the difference.
Why make us guess?
 
M

Manfred Kooistra

Manfred Kooistra wrote on 24 jan 2007 in comp.lang.javascript:
Changes everything back to XHTML, and now it works fine. Strange. I
still have no idea, what the problem was ...
Click to expand...

Again:

1 Please always quote on usenet, this is not email,
others want to read it too,
and not all news servers are current with older mails of a thread.

2 Please share the code [minimal] that maks the difference.
Why make us guess?
Click to expand...

The solution to my problem is what I posted in my original question.
As I wrote: Now it works, I don't know why. There is no difference, so
I thought there was no reason to post the same code again.
 
M

Manfred Kooistra

It does, but it's not obvious because both divs have the same content.
Change the contents e.g.:

<div id="one" style="display: block;">content 1</div>
<div id="two" style="display: none;">content 2</div>

and you'll see some difference.
Click to expand...

In my file the two divs did not contain the same "content" and
"content" [that was an error here in my posts], but images in one div
and text in the other - so the switching or non-switching was
unmistakeable.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with code 0
Need help , Having problem with Drag n Drop ? 9
Slideshow not working properly 2
Need help with stripe payment 0
Need help , Having problem with Drag n Drop... 1
Please Help? 0
Justify-content not working 1
Help with my responsive home page 2

Members online

Total: 28 (members: 1, guests: 27)
Robots: 173

Forum statistics

Threads
473,756
Messages
2,569,533
Members
45,006
Latest member
LauraSkx64

Latest Threads

Top