JavaScript not working, need help

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?

Jan 24 '07 #1

Subscribe Post Reply

1588

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?

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() {

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Jan 24 '07 #2

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.

Jan 24 '07 #3

Manfred Kooistra

Sorry, there is an error code.

I changed the file to HTML 4 Transitional with:

<script language="javascript" type="text/javascript">

</script>

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

Any ideas?

Jan 24 '07 #4

Manfred Kooistra

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

Jan 24 '07 #5

Osmo Saarikumpu

Manfred Kooistra wrote:

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

There is no error message, it simply does nothing.

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.

--
Osmo

Jan 24 '07 #6

Evertjan.

Manfred Kooistra wrote on 24 jan 2007 in comp.lang.javascript:

Thanks, Evertjan. I changed the file to this:

[please always quote on usenet]

<html>
<head>
<script language="javascript" type="text/javascript">
//<![CDATA[

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.

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>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Jan 24 '07 #7

Evertjan.

Manfred Kooistra wrote on 24 jan 2007 in comp.lang.javascript:

Sorry, there is an error code.

I changed the file to HTML 4 Transitional with:

Thas sould have no influence.

<script language="javascript" type="text/javascript">

Do not use language="javascript", it has been deprecated for many yesrs.

<!--

Same for <!--

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

and for // -->

</script>

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

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

Any ideas?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Jan 24 '07 #8

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 ...

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?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Jan 24 '07 #9

Manfred Kooistra

On 24 Jan., 14:50, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:

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 ...

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?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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.

Feb 3 '07 #10

Manfred Kooistra

On 24 Jan., 14:37, Osmo Saarikumpu <o...@weppipakki.comwrote:

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

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.

--
Osmo

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.

Feb 3 '07 #11

kim mizell

help! i need astince it will not work.

*** Sent via Developersdex http://www.developersdex.com ***

Feb 17 '07 #12

Jim Land

"Manfred Kooistra" <ma**************@gmx.dewrote in
news:11**********************@l53g2000cwa.googlegr oups.com:

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?

You named your function "switch", which is the name of a JS built-in
function, so JS refuses to work. Rename your function something else,
like "switchthediv" and it works OK in FF and IE.

Feb 17 '07 #13

Similar topics

136

Javascript Best Practices Document v1.0

by: Matt Kruse | last post by:

http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice