What's wrong with this javascript code?

K

kristaps.ancans

If i click on Link #1 it should add display:none to the div#pcont1d
and display:block to the div#pcont2d and vice verse. But it doesn't.
Where's my mistake?

<script type="text/javascript">
<!--
window.onload=function(){
sch = document.getElementById('profdnav');
if (typeof sch != "undefined"){
tbs = sch.getElementsByTagName('li');
tbl = tbs.length;
for(i=0;i<tbl;i++){
fck = tbs.id;
tbs.firstChild.onclick=function(){
toggle(fck);
alert(i);
return false;
};
tbs.firstChild.title=(tbs.id);
}
}
}
function toggle(tn) {
for(var i=0;i<tbl;i++){
var taid = tbs.id;
var did = taid+'d';
if(taid==tn){
tbs.className='act';
document.getElementById(did).style.display='block';
}
else{
tbs.className='tab';
document.getElementById(did).style.display='none';
}
}
}
//-->
</script>
<ul id="profdnav">
<li id="pcont1" class="act"><a name="Link #1">Link #1</a></li>
<li id="pcont2" class="tab"><a name="Link #2">Link #2</a></li>
</ul>
<div id="pcont1d">aaa</div>
<div id="pcont2d" style="display:none">bbb</div>
 
E

Evertjan.

wrote on 29 okt 2007 in comp.lang.javascript:
If i click on Link #1 it should add display:none to the div#pcont1d
and display:block to the div#pcont2d and vice verse. But it doesn't.

It "works" on IE7 with the exeption of that the alert alway shows "2".
Where's my mistake?

I will show you:
<script type="text/javascript">

use:

don't use <!-- in the 21st century

var tbs;
[better be certain than sorry]
window.onload=function(){
sch = document.getElementById('profdnav');
if (typeof sch != "undefined"){

if (sch){
[suffices]
tbs = sch.getElementsByTagName('li');
tbl = tbs.length;
for(i=0;i<tbl;i++){
fck = tbs.id;
tbs.firstChild.onclick=function(){


[This is the main problem. firstChild could differ crossbrowserwize.
If at all necessary, use:]

tbs.getElementsByTagName('a')[0].onclick = ....

toggle(fck);
alert(i);
return false;

[No retun false is needed said:
};
tbs.firstChild.title=(tbs.id);


[try this for debugging:]

tbs.firstChild.title=tbs.firstChild.onclick

[and nmouseover, you will se the function, and that the is
nort relaced by [1] and[2]. Why should you have thought it would?]
}
}
}
function toggle(tn) {
for(var i=0;i<tbl;i++){
var taid = tbs.id;
var did = taid+'d';
if(taid==tn){
tbs.className='act';
document.getElementById(did).style.display='block';
}
else{
tbs.className='tab';
document.getElementById(did).style.display='none';
}
}
}


[skip that, there are no browsers around that need that]
</script>
<ul id="profdnav">
<li id="pcont1" class="act"><a name="Link #1">Link #1</a></li>
<li id="pcont2" class="tab"><a name="Link #2">Link #2</a></li>

[why use said:
</ul>
<div id="pcont1d">aaa</div>
<div id="pcont2d" style="display:none">bbb</div>

=======================================================

Try this:


<script type="text/javascript">

var tbs;

window.onload=function() {
sch = document.getElementById('profdnav');
if (sch){
tbs = sch.getElementsByTagName('li');
for(i=0;i<tbs.length;i++){
tbs.onclick = function(){ toggle(this) };
tbs.title = tbs.id;
};
};
};

function toggle(tn) {
//alert(tn.id);
var x;
for(var i=0;i<tbs.length;i++){
x = document.getElementById(tbs.id + 'd');
x.className = 'tab';
x.style.display = 'none';
};
x = document.getElementById(tn.id + 'd');
x.className = 'act';
x.style.display = 'block';
};

</script>

<ul id="profdnav">
<li id="pcont1" class="act">Link #1</li>
<li id="pcont2" class="tab">Link #2</li>
<li id="pcont3" class="tab">Link #3</li>
</ul>
<div id="pcont1d">aaa</div>
<div id="pcont2d" style="display:none">bbb</div>
<div id="pcont3d" style="display:none">ccc</div>
 
K

kristaps.ancans

Thanks for your help.
And i change a little bit of code to fit my needs ->

function toggle(tn) {
var x;
for(var i=0;i<tbs.length;i++){
x = document.getElementById(tbs.id + 'd');
x.style.display = 'none';
if(tbs==tn){
tbs.className='act';}
else{
tbs.className='tab';}
};
x = document.getElementById(tn.id + 'd');
x.style.display = 'block';
};

thanks again :)


wrote on 29 okt 2007 in comp.lang.javascript:
If i click on Link #1 it should add display:none to the div#pcont1d
and display:block to the div#pcont2d and vice verse. But it doesn't.

It "works" on IE7 with the exeption of that the alert alway shows "2".
Where's my mistake?

I will show you:
<script type="text/javascript">

use:

don't use <!-- in the 21st century

var tbs;
[better be certain than sorry]
window.onload=function(){
sch = document.getElementById('profdnav');
if (typeof sch != "undefined"){

if (sch){
[suffices]
tbs = sch.getElementsByTagName('li');
tbl = tbs.length;
for(i=0;i<tbl;i++){
fck = tbs.id;
tbs.firstChild.onclick=function(){


[This is the main problem. firstChild could differ crossbrowserwize.
If at all necessary, use:]

tbs.getElementsByTagName('a')[0].onclick = ....
toggle(fck);
alert(i);
return false;

[No retun false is needed said:
};
tbs.firstChild.title=(tbs.id);


[try this for debugging:]

tbs.firstChild.title=tbs.firstChild.onclick

[and nmouseover, you will se the function, and that the is
nort relaced by [1] and[2]. Why should you have thought it would?]


}
}
}
function toggle(tn) {
for(var i=0;i<tbl;i++){
var taid = tbs.id;
var did = taid+'d';
if(taid==tn){
tbs.className='act';
document.getElementById(did).style.display='block';
}
else{
tbs.className='tab';
document.getElementById(did).style.display='none';
}
}
}
//-->


[skip that, there are no browsers around that need that]
</script>
<ul id="profdnav">
<li id="pcont1" class="act"><a name="Link #1">Link #1</a></li>
<li id="pcont2" class="tab"><a name="Link #2">Link #2</a></li>

[why use said:
</ul>
<div id="pcont1d">aaa</div>
<div id="pcont2d" style="display:none">bbb</div>

=======================================================

Try this:

<script type="text/javascript">

var tbs;

window.onload=function() {
sch = document.getElementById('profdnav');
if (sch){
tbs = sch.getElementsByTagName('li');
for(i=0;i<tbs.length;i++){
tbs.onclick = function(){ toggle(this) };
tbs.title = tbs.id;
};
};

};

function toggle(tn) {
//alert(tn.id);
var x;
for(var i=0;i<tbs.length;i++){
x = document.getElementById(tbs.id + 'd');
x.className = 'tab';
x.style.display = 'none';
};
x = document.getElementById(tn.id + 'd');
x.className = 'act';
x.style.display = 'block';

};

</script>

<ul id="profdnav">
<li id="pcont1" class="act">Link #1</li>
<li id="pcont2" class="tab">Link #2</li>
<li id="pcont3" class="tab">Link #3</li>
</ul>
<div id="pcont1d">aaa</div>
<div id="pcont2d" style="display:none">bbb</div>
<div id="pcont3d" style="display:none">ccc</div>
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top