wieso findet meine index.html den javascipt nicht Oo?

lumpi001 · 1 Februar 2011

moin hab da mal ne frage wieso funktioniert der js hier nun nicht? ^^ bin echt überfragt
ist alles in einem ordner.

Index

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Unbenanntes Dokument</title>
<script language="javascript" src="meissner.js"></script>
</head>
<body>
<div id="wrapper">
 <div id="header"></div>
    <div id="navigation">
     <div id="start"><a href=# onclick=punkt1()>&nbsp;</a></div>
        <div id="team"><a href=# onclick=punkt2()>&nbsp;</a></div>
        <div id="ueber"><a href=# onclick=punkt3()>&nbsp;</a></div>
        <div id="leistungen"><a href=# onclick=punkt4()>&nbsp;</a></div>
        <div id="links"><a href=# onclick=punkt5()>&nbsp;</a></div>
        <div id="imp"><a href=# onclick=punkt6()>&nbsp;</a></div>
        <div id="nav_end"></div>
        <div class="clear"></div>
    
    </div><!--navigation END-->
<div id="content_o"></div>
<div id="content">
 <div id="contentbuffer">
     <div id="content_l"></div>
        <div id="content_m" style="padding-left:15px; padding-right:15px">
         <div id="test1" style="visibility: visible;z-index:auto;">Hallo!</div>
            <div id="test2" style="visibility: visible;z-index:auto;">lol</div>
            <div id="test3" style="visibility: visible;z-index:auto;">omg</div>
            <div id="test4" style="visibility: visible;z-index:auto;">moin</div>
            <div id="test5" style="visibility: visible;z-index:auto;">JOP</div>
            <div id="test6" style="visibility: visible;z-index:auto;">TEST</div>
        </div>
        <div id="content_r"></div>
        
        <div class="clear"></div>
     
        </div><!--contenbuffer END-->
</div><!--Content END-->
<div id="footer"></div>
</div><!--wrapper END-->
</body>
</html>

js

Code:

function punkt1() {
 if(document.getElementById('test1').style.visibility=='hidden') {
  document.getElementById('test1').style.visibility='visible';
  document.getElementById('test2').style.visibility='hidden';
  document.getElementById('test3').style.visibility='hidden';
  document.getElementById('test4').style.visibility='hidden';
  document.getElementById('test5').style.visibility='hidden';
  document.getElementById('test6').style.visibility='hidden';
  document.getElementById('test1').style.height='100%';
  document.getElementById('test2').style.height='0px';
  document.getElementById('test3').style.height='0px';
  document.getElementById('test4').style.height='0px';
  document.getElementById('test5').style.height='0px';
  document.getElementById('test6').style.height='0px';
}
}
function punkt2() {
 if(document.getElementById('test2').style.visibility=='hidden') {
  document.getElementById('test1').style.visibility='hidden';
  document.getElementById('test2').style.visibility='visible';
  document.getElementById('test3').style.visibility='hidden';
  document.getElementById('test4').style.visibility='hidden';
  document.getElementById('test5').style.visibility='hidden';
  document.getElementById('test6').style.visibility='hidden';
  document.getElementById('test1').style.height='0px';
  document.getElementById('test2').style.height='100%';
  document.getElementById('test3').style.height='0px';
  document.getElementById('test4').style.height='0px';
  document.getElementById('test5').style.height='0px';
  document.getElementById('test6').style.height='0px';
 }
}
function punkt3() {
 if(document.getElementById('test3').style.visibility=='hidden') {
  document.getElementById('test1').style.visibility='hidden';
  document.getElementById('test2').style.visibility='hidden';
  document.getElementById('test3').style.visibility='visible';
  document.getElementById('test4').style.visibility='hidden';
  document.getElementById('test5').style.visibility='hidden';
  document.getElementById('test6').style.visibility='hidden';
  document.getElementById('test1').style.height='0px';
  document.getElementById('test2').style.height='0px';
  document.getElementById('test3').style.height='100%';
  document.getElementById('test4').style.height='0px';
  document.getElementById('test5').style.height='0px';
  document.getElementById('test6').style.height='0px';
 }
} 
function punkt4() {
 if(document.getElementById('test4').style.visibility=='hidden') {
  document.getElementById('test1').style.visibility='hidden';
  document.getElementById('test2').style.visibility='hidden';
  document.getElementById('test3').style.visibility='hidden';
  document.getElementById('test4').style.visibility='visible';
  document.getElementById('test5').style.visibility='hidden';
  document.getElementById('test6').style.visibility='hidden';
  document.getElementById('test1').style.height='0px';
  document.getElementById('test2').style.height='0px';
  document.getElementById('test3').style.height='0px';
  document.getElementById('test4').style.height='100%';
  document.getElementById('test5').style.height='0px';
  document.getElementById('test6').style.height='0px';
 }
} 
function punkt5() {
 if(document.getElementById('test5').style.visibility=='hidden') {
  document.getElementById('test1').style.visibility='hidden';
  document.getElementById('test2').style.visibility='hidden';
  document.getElementById('test3').style.visibility='hidden';
  document.getElementById('test4').style.visibility='hidden';
  document.getElementById('test5').style.visibility='visible';
  document.getElementById('test6').style.visibility='hidden';
  document.getElementById('test1').style.height='0px';
  document.getElementById('test2').style.height='0px';
  document.getElementById('test3').style.height='0px';
  document.getElementById('test4').style.height='0px';
  document.getElementById('test5').style.height='100%';
  document.getElementById('test6').style.height='0px';
 }
} 
function punkt6() {
 if(document.getElementById('test6').style.visibility=='hidden') {
  document.getElementById('test1').style.visibility='hidden';
  document.getElementById('test2').style.visibility='hidden';
  document.getElementById('test3').style.visibility='hidden';
  document.getElementById('test4').style.visibility='hidden';
  document.getElementById('test5').style.visibility='hidden';
  document.getElementById('test6').style.visibility='visible';
  document.getElementById('test1').style.height='0px';
  document.getElementById('test2').style.height='0px';
  document.getElementById('test3').style.height='0px';
  document.getElementById('test4').style.height='0px';
  document.getElementById('test5').style.height='0px';
  document.getElementById('test6').style.height='100%';
 }
}

hoffe da weis jemand bescheid

mfg lumpi

Arcsinh · 1 Februar 2011

1. Benutzt statt language="javascript" lieber type="text/javascript"
2. Hast du's auch richtig eingebunden?

lumpi001 · 1 Februar 2011

also ich habs nun mal in type geändert aber er findet es immernoch nicht... ist richtig eingebunden liegt beides im selben ordner und der js heisst auch meissner.js. Könnte es daran liegen das der javascript vorher mit einer anderen index.html verknüpft war die ich nun aber rausgehauen habe weils das alles nur ein einziges chaos war ^^... die jetztige hab ich neu geschrieben.

Arcsinh · 1 Februar 2011

Glaub ich nicht. Was steht denn in der Fehlerkonsole?

lumpi001 · 1 Februar 2011

nix.. bloß wenn ich die index mitn explorer starte macht er einfach nicht das was ich mit dem script erreichen möchte, hat vorher ja auch funktioniert! hmm.

Cheffchen · 1 Februar 2011

Mall ne frage, was macht die Abfrage.
Zum anfang ist ja alles sichtbar also wird der inhalt der funktion nie ausgeführt, oder.

if(document.getElementById('test1').style.visibility=='hidden') {

nimm die mal komplett raus, also so ist die komplette Funktion punkt1()

HTML:

function punkt1() {
  document.getElementById('test1').style.visibility='visible';
  document.getElementById('test2').style.visibility='hidden';
  document.getElementById('test3').style.visibility='hidden';
  document.getElementById('test4').style.visibility='hidden';
  document.getElementById('test5').style.visibility='hidden';
  document.getElementById('test6').style.visibility='hidden';
  document.getElementById('test1').style.height='100%';
  document.getElementById('test2').style.height='0px';
  document.getElementById('test3').style.height='0px';
  document.getElementById('test4').style.height='0px';
  document.getElementById('test5').style.height='0px';
  document.getElementById('test6').style.height='0px';
}

Cheffchen

lumpi001 · 1 Februar 2011

wie genau meinst du das? es sollte iegentlich so aussehen das wenn cih die seite lade er als erstes document.getElementById('test1').style.visibility='visible'; anzeigt... sich die anzeige aber ändert wie in den anderen funktionspunkten geschrieben, wenn ich den dazugehörigen link anklicke

lumpi

Cheffchen · 1 Februar 2011

nim doch einfach mal das raus und die end schleife und klick auf den ersten Link, macht der was es soll oder nicht?

Das raus: if(document.getElementById('test1').style.visibility=='hidden') {

Cheffchen

EDIT:
ach ihr das funst bei mir

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
function punkt1() {
  document.getElementById('test1').style.visibility='visible';
  document.getElementById('test2').style.visibility='hidden';
  document.getElementById('test3').style.visibility='hidden';
  document.getElementById('test4').style.visibility='hidden';
  document.getElementById('test5').style.visibility='hidden';
  document.getElementById('test6').style.visibility='hidden';
  document.getElementById('test1').style.height='100%';
  document.getElementById('test2').style.height='0px';
  document.getElementById('test3').style.height='0px';
  document.getElementById('test4').style.height='0px';
  document.getElementById('test5').style.height='0px';
  document.getElementById('test6').style.height='0px';
}
</script>
</head>
<body>
<div id="wrapper">
 <div id="header"></div>
    <div id="navigation">
     <div id="start"><a href=# onclick=punkt1()>&nbsp;</a></div>
        <div id="team"><a href=# onclick=punkt2()>&nbsp;</a></div>
        <div id="ueber"><a href=# onclick=punkt3()>&nbsp;</a></div>
        <div id="leistungen"><a href=# onclick=punkt4()>&nbsp;</a></div>
        <div id="links"><a href=# onclick=punkt5()>&nbsp;</a></div>
        <div id="imp"><a href=# onclick=punkt6()>&nbsp;</a></div>
        <div id="nav_end"></div>
        <div class="clear"></div>
 
    </div><!--navigation END-->
<div id="content_o"></div>
<div id="content">
 <div id="contentbuffer">
     <div id="content_l"></div>
        <div id="content_m" style="padding-left:15px; padding-right:15px">
         <div id="test1" style="visibility: visible;z-index:auto;">Hallo!</div>
            <div id="test2" style="visibility: visible;z-index:auto;">lol</div>
            <div id="test3" style="visibility: visible;z-index:auto;">omg</div>
            <div id="test4" style="visibility: visible;z-index:auto;">moin</div>
            <div id="test5" style="visibility: visible;z-index:auto;">JOP</div>
            <div id="test6" style="visibility: visible;z-index:auto;">TEST</div>
        </div>
        <div id="content_r"></div>
 
        <div class="clear"></div>
 
        </div><!--contenbuffer END-->
</div><!--Content END-->
<div id="footer"></div>
</div><!--wrapper END-->
</body>
</html>

struppi · 2 Februar 2011

lumpi001 schrieb:
nix..

Bist du sicher? Du weißt wo du die Fehlermeldngen findest?
Wo finde ich die Fehlerkonsole?

Cheffchen · 2 Februar 2011

Hallo sruppi,
Fehlerkonsole dürfte kein fehler geben, er hat bloss ein Logik fehler drin, würde ich sagen.

Er Prüft in jeder Funktion ob das div hidden ist, wenn ja dann mach dies sichtbar und die anderen hidden.

HTML:

if(document.getElementById('test1').style.visibility=='hidden') {

Am anfang sind aber alle sichbar, also macht die Funktion nichts weil die prüfung ein NÖ ausgibt und deswegen nichts macht :O).

ps: Variable mit Zahlen "test1, test2, ..." ist glaube ich auch nicht zu empfehlen, mache ich jedenfalls nie, frag mich jetzt aber nicht wieso.

Cheffchen

lumpi001 · 2 Februar 2011

hmm also ich habs nun mal überall rausgenommen.. aber er zeigt immer noch alles an und ich kann auch nix anklicken =O

lumpi001 · 2 Februar 2011

ah ja okay der fehler lag in der index =O die verlingkung war nix

mein js sieht nun so aus:

Code:

function punkt1() {
  document.getElementById('starts').style.visibility='visible';
  document.getElementById('dteam').style.visibility='hidden';
  document.getElementById('ueberuns').style.visibility='hidden';
  document.getElementById('leist').style.visibility='hidden';
  document.getElementById('link').style.visibility='hidden';
  document.getElementById('impress').style.visibility='hidden';
  document.getElementById('starts').style.height='100%';
  document.getElementById('dteam').style.height='0px';
  document.getElementById('ueberuns').style.height='0px';
  document.getElementById('leist').style.height='0px';
  document.getElementById('link').style.height='0px';
  document.getElementById('impress').style.height='0px';
}
function punkt2() {
  document.getElementById('starst').style.visibility='hidden';
  document.getElementById('dteam').style.visibility='visible';
  document.getElementById('ueberuns').style.visibility='hidden';
  document.getElementById('leist').style.visibility='hidden';
  document.getElementById('link').style.visibility='hidden';
  document.getElementById('impress').style.visibility='hidden';
  document.getElementById('start').style.height='0px';
  document.getElementById('dteam').style.height='100%';
  document.getElementById('ueberuns').style.height='0px';
  document.getElementById('leist').style.height='0px';
  document.getElementById('link').style.height='0px';
  document.getElementById('impress').style.height='0px';
}
function punkt3() {
  document.getElementById('starts').style.visibility='hidden';
  document.getElementById('dteam').style.visibility='hidden';
  document.getElementById('ueberuns').style.visibility='visible';
  document.getElementById('leist').style.visibility='hidden';
  document.getElementById('link').style.visibility='hidden';
  document.getElementById('impress').style.visibility='hidden';
  document.getElementById('starts').style.height='0px';
  document.getElementById('dteam').style.height='0px';
  document.getElementById('ueberuns').style.height='100%';
  document.getElementById('leist').style.height='0px';
  document.getElementById('link').style.height='0px';
  document.getElementById('impress').style.height='0px';
 }
function punkt4() {
  document.getElementById('starts').style.visibility='hidden';
  document.getElementById('dteam').style.visibility='hidden';
  document.getElementById('ueberuns').style.visibility='hidden';
  document.getElementById('leist').style.visibility='visible';
  document.getElementById('link').style.visibility='hidden';
  document.getElementById('impress').style.visibility='hidden';
  document.getElementById('starts').style.height='0px';
  document.getElementById('dteam').style.height='0px';
  document.getElementById('ueberuns').style.height='0px';
  document.getElementById('leist').style.height='100%';
  document.getElementById('link').style.height='0px';
  document.getElementById('impress').style.height='0px';
 }
function punkt5() {
  document.getElementById('starts').style.visibility='hidden';
  document.getElementById('dteam').style.visibility='hidden';
  document.getElementById('ueberuns').style.visibility='hidden';
  document.getElementById('leist').style.visibility='hidden';
  document.getElementById('link').style.visibility='visible';
  document.getElementById('impress').style.visibility='hidden';
  document.getElementById('starts').style.height='0px';
  document.getElementById('dteam').style.height='0px';
  document.getElementById('ueberuns').style.height='0px';
  document.getElementById('leist').style.height='0px';
  document.getElementById('link').style.height='100%';
  document.getElementById('impress').style.height='0px';
 }
function punkt6() {
  document.getElementById('starts').style.visibility='hidden';
  document.getElementById('dteam').style.visibility='hidden';
  document.getElementById('ueberuns').style.visibility='hidden';
  document.getElementById('leist').style.visibility='hidden';
  document.getElementById('link').style.visibility='hidden';
  document.getElementById('impress').style.visibility='visible';
  document.getElementById('starts').style.height='0px';
  document.getElementById('dteam').style.height='0px';
  document.getElementById('ueberuns').style.height='0px';
  document.getElementById('leist').style.height='0px';
  document.getElementById('link').style.height='0px';
  document.getElementById('impress').style.height='100%';
 }

wie bekomm ich das nun hin das er mir beim laden der seite erstmal nur funktion1 zeigt?

mfg lumpi

Cheffchen · 2 Februar 2011

Hallo,

na im Body tag

HTML:

<body onload="funktion1()">

Cheffchen

Arcsinh · 2 Februar 2011

Cheffchen schrieb:
Hallo,

na im Body tag

HTML:

<body onload="funktion1()">

Wobei inline-JS nicht so der Knaller ist...

Cheffchen · 2 Februar 2011

Na komm, nicht der Knaller, wie dann?
js ist bei mir auch nur so lala und lerne gerne dazu.

Cheffchen

alogheo · 2 Februar 2011

Code:

window.onload=funktion1();

struppi · 3 Februar 2011

alogheo schrieb:
Code:

window.onload=funktion1();

Nein, so:

Code:

window.onload=funktion1;

Arcsinh · 3 Februar 2011

Oder so:

Code:

window.onload = function() {
    // CODE
};

Läuft aber auf dasselbe hinaus.

Cheffchen · 3 Februar 2011

Hallo ihr,

so ich habs jetzt geschnalt, werde es mir hoffentlich merken :O).
Beides hat ja berechtigung. 1. recht kurz abe nue 1Funktion 2. bei mehr Funktionen.
Wenn ich das jetzt richtig gelesen haben

Cheffchen

struppi · 3 Februar 2011

und 2.) wenn du noch Parameter übergeben willst.

Bei 1.) wird in der Regel kein Parameter übergeben, wenn du aber eine Eventfunktion so zuweist, dann übergeben die meisten Browser ein Eventobjekt.

element.onclick = funktion;

funktion bekommt nun, ein Eventobjekt übergeben (ausser im IE)

wieso findet meine index.html den javascipt nicht Oo?

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

struppi

Guest

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Mitglied

struppi

Guest

Neues Mitglied

Senior HTML'ler

struppi

Guest