Why is this not working right ?

Aaron Gray · Jul 6, 2011

Have not done any JavaScript for a year or so.

Cannot remember how to do this ?

Why is the following not working right ?

http://www.aarongray.org/comp.lang.javascript/test.html

~~~~~~~~~ test.html ~~~~~~~~~
<html>
<head>
<style>
#div_1 {
display: block;
}
#div_2 {
display: none;
}
#div_3 {
display: none;
}
#div_4 {
display: none;
}
</style>
<script>
old = "div_1";
function show(d) {
alert("test");
document.getElementById(old).style.display = "none";
document.getElementById(d).style.display = "block";
old = d;
}
</script>
</head>
<body>
<div>
<span onClick='show("div_1");'>1</a>
<span onClick='show("div_2");'>2</a>
<span onClick='show("div_3");'>3</a>
<span onClick='show("div_4");'>4</a>
</div>
<div>
<div id="div_1">
1
</div>
<div id="div_2">
2
</div>
<div id="div_3">
3
</div>
<div id="div_4">
4
</div>
</div>
</body>
</html>
~~~~~~~~~~~~~~~~~

Many thanks in advance,

Aaron

Stanimir Stamenkov · Jul 6, 2011

Wed, 6 Jul 2011 21:07:29 +0100, /Aaron Gray/:

Why is the following not working right ?

http://www.aarongray.org/comp.lang.javascript/test.html

You haven't stated what and how it is not working right, but see
further bellow.

~~~~~~~~~ test.html ~~~~~~~~~
[...]
<div>
<span onClick='show("div_1");'>1</a>
<span onClick='show("div_2");'>2</a>
<span onClick='show("div_3");'>3</a>
<span onClick='show("div_4");'>4</a>
</div>
[...]

You've got malformed markup here (you open a <span> element but try
to close it using </a> tag) which results in the following DOM (text
nodes omitted):

div
`-- span
`-- span
`-- span
`-- span

instead of (I guess):

div
|-- span
|-- span
|-- span
`-- span

When you click span "4", the click event bubbles and click handlers
are invoked on "3", "2" and "1", so you always end up with "div_1"
shown while the others get hidden.

All modern browsers have basic tools (some might require additional
installation) to examine the DOM of the document currently loaded,
so you might get into habit of observing that.

Aaron Gray · Jul 6, 2011

Stanimir Stamenkov said:
Wed, 6 Jul 2011 21:07:29 +0100, /Aaron Gray/:

Hi Stanimir,

You haven't stated what and how it is not working right, but see further
bellow.

below

a bellow or bellows is device for starting a fire by blowing air.

~~~~~~~~~ test.html ~~~~~~~~~
[...]
<div>
<span onClick='show("div_1");'>1</a>
<span onClick='show("div_2");'>2</a>
<span onClick='show("div_3");'>3</a>
<span onClick='show("div_4");'>4</a>
</div>
[...]

Click to expand...

You've got malformed markup here (you open a <span> element but try to
close it using </a> tag) which results in the following DOM (text nodes
omitted):

div
`-- span
`-- span
`-- span
`-- span

instead of (I guess):

div
|-- span
|-- span
|-- span
`-- span

When you click span "4", the click event bubbles and click handlers are
invoked on "3", "2" and "1", so you always end up with "div_1" shown while
the others get hidden.

All modern browsers have basic tools (some might require additional
installation) to examine the DOM of the document currently loaded, so you
might get into habit of observing that.

Ah, thanks alot, that was very silly of me !

Aaron

Jukka K. Korpela · Jul 6, 2011

Have not done any JavaScript for a year or so.

Cannot remember how to do this ?

Try defining "this".

Why is the following not working right ?

What is "right"?

http://www.aarongray.org/comp.lang.javascript/test.html

It's a dummy page with no real functionality.

~~~~~~~~~ test.html ~~~~~~~~~

Copy and paste does not help here. It just makes things worse. Either
the fragments posted are the real thing, or the URL points to them. Are
we supposed to make a guess?

Aaron Gray · Jul 6, 2011

Jukka K. Korpela said:
Try defining "this".

What is "right"?

It's a dummy page with no real functionality.

Copy and paste does not help here. It just makes things worse. Either the
fragments posted are the real thing, or the URL points to them. Are we
supposed to make a guess?

Sorry I corrected the online version.

Aaron

Mike Duffy · Jul 7, 2011

Sorry I corrected the online version.

Do you mean that you have fixed your unstated problem, or that you have
complied with Jukka's request? You still have not told us what it is
*supposed* to do.

As far as I can tell, it seems to work the same with IE8 & FF.

Evertjan. · Jul 7, 2011

Aaron Gray wrote on 06 jul 2011 in comp.lang.javascript:

Have not done any JavaScript for a year or so.

Cannot remember how to do this ?

Why is the following not working right ?

http://www.aarongray.org/comp.lang.javascript/test.html

~~~~~~~~~ test.html ~~~~~~~~~
<html>
<head>
<style>
#div_1 {
display: block;
}
#div_2 {
display: none;
}
#div_3 {
display: none;
}
#div_4 {
display: none;
}
</style>
<script>
old = "div_1";
function show(d) {
alert("test");
document.getElementById(old).style.display = "none";
document.getElementById(d).style.display = "block";
old = d;
}
</script>
</head>
<body>
<div>
<span onClick='show("div_1");'>1</a>
<span onClick='show("div_2");'>2</a>
<span onClick='show("div_3");'>3</a>
<span onClick='show("div_4");'>4</a>
</div>
<div>
<div id="div_1">
1
</div>
<div id="div_2">
2
</div>
<div id="div_3">
3
</div>
<div id="div_4">
4
</div>
</div>
</body>
</html>
~~~~~~~~~~~~~~~~~

Try:

<html>
<head>
<style type='text/css'>
.clickGroup span {
background-color:#ccc;cursor

ointer;
}
.divGroup div {
display:none;color:green;
}
</style>
<script type='text/javascript'>
var dd;
function show(d) {
d = document.getElementById('div_'+d);
if (dd) dd.style.display = 'none';
d.style.display = 'block';
dd = d;
};
</script>
</head>
<body onload = 'show(1);'>
<div class='clickGroup'>
<span onClick='show(this.innerHTML);'>1</span>
<span onClick='show(this.innerHTML);'>2</span>
<span onClick='show(this.innerHTML);'>3</span>
<span onClick='show(this.innerHTML);'>4</span>
</div>
<div class='divGroup'>
<div id='div_1'>1</div>
<div id='div_2'>2</div>
<div id='div_3'>3</div>
<div id='div_4'>4</div>
</div>
</body>
</html>

Help with code	0	Jun 12, 2022
Slideshow not working properly	2	Jan 7, 2023
I am trying to make an audio player, how do I get the selected file to be playable?	5	Mar 29, 2022
Why is the e.target not working here?	1	Dec 29, 2022
Jquery not triggering / acting as expected.	0	Mar 6, 2022
Is it possible an iframe can overlapp another?	3	Apr 20, 2022
Set value after clicking in field	11	May 9, 2023
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022

Why is this not working right ?

Aaron Gray

Stanimir Stamenkov

Aaron Gray

Jukka K. Korpela

Aaron Gray

Mike Duffy

Evertjan.

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads