DIV Box > Inhalte austauschen

[blackrose4me]

Hallöchen zusammen =)

Ich hätte do mal ein Problem, welches ich seit ein paar Tagen nicht ganz auf die Reihe bekomme, zumindest nicht so wie ich es eigentlich haben möchte :/

Vllt könnt ihr mir ja helfen, würde mich sehr darüber freuen

Erstmal mein Codeschnipsel

<script> 
function opentopnavdivs(navid) 
{ 
	 
	if (document.getElementById('suche').style.display =='visible'){ 
	  document.getElementById('suche').style.display ='visible'; 
	  document.getElementById(login).style.display ='none'; 
	} else { 
	  document.getElementById('suche').style.display ='none'; 
	  document.getElementById(login).style.display ='visible'; 
	} 
	 
} 
</script>  


<div id="suche" style="display:none;"> 
<form name="search_form" action="Such-Anfrage.htm" method="get" style="margin:0px;"> 
	<table> 
		<tr> 
		  <td valign="middle"><input style="font-family:Tahoma; color:#5A5A5C; line-height:180%; font-size:13px;" type="Text" name="suche" size="36" value="<?php echo($_POST["suche"]); ?>"></td> 
		  <td valign="middle" style="padding-left:3px;"><img src="/img/suche_hover.jpg"></td> 
		</tr> 
	</table> 
</form> 
</div>

<div id="login" style="display:visible;"> 
<form name="login" action="http://www.test.de/login.htm" method="post" style="margin:0px;"> 
	<table> 
		<tr> 
			  <td valign="middle"><img src="/img/login_hover1.jpg"></td> 
			  <td valign="middle"><input style="font-family:Tahoma; color:#5A5A5C; line-height:180%; font-size:13px; padding-left:3px;" type="Text" name="login"  value="<?php echo($_REQUEST["login"]); ?>" size="9"></td> 
			  <td valign="middle" style="padding-left:3px;"><img src="/img/pw_hover1.jpg"></td> 
			  <td valign="middle"><input style="font-family:Tahoma; color:#5A5A5C; line-height:180%; font-size:12,px; padding-left:3px;" type="password" name="pw" value="<?php echo($_GET["pw"]); ?>" size="9"></td> 
			  <td valign="middle" style="padding-left:3px;"> 
					<button type="submit" style="background-color:#4084D2; border-style:none;width:32px;"> 
				    <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;height:21px;"> 
					  <tr> 
						<td><img src="/img/go_hover.jpg"></td> 
					  </tr> 
					</table> 
					</button> 
			  </td> 
		 </tr> 
	 </table> 
 </form> 
</div>

Was ich eigentlich möchte, aber noch nicht 100%ig funktioniert:
Ich habe eine kleine Div Box in meiner Index, in der 2 Buttons sind die mit Javascript zusammenarbeiten >> Buttons > Suche und Login
Standardmäßig ohne Betätigung eines Buttons soll mein Login in der Div Box erscheinen
Wenn Button 1 gedrückt, dann Login in meine DIV Box und Suche wird ausgeblendet
Wenn Button 2 gedrückt, dann Such-Funktion in meiner Box und Login wird ausgeblendet

Jedoch funktioniert mein Code iwie nicht, und ich verstehe nicht ganz warum, habe auch schon einiges ausprobiert die letzten Tage, jedoch bisher nicht wirklich mit großen Erfolg

Weiß jemand Rat?

 

[Quaese]

Hi,

zunächst einmal gibt es keinen Wert visible für die CSS-Eigenschaft display. Stattdessen wird im Zusammenhang mit einem DIV im allgemeinen block verwendet.

Weiterhin hast du einen Fehler in deiner if-Bedingung. Das Suchen-Element soll eingeblendet werden, wenn es nicht sichtbar ist.

Zuletzt muss login in Anführungszeichen steht, da es als ID-String an getElementById übergeben wird.

function opentopnavdivs(navid){
    if (document.getElementById('suche').style.display =='block'){
      document.getElementById('suche').style.display ='none';
      document.getElementById('login').style.display ='block';
    } else {
      document.getElementById('suche').style.display ='block';
      document.getElementById('login').style.display ='none';
    }
}

Ciao
Quaese

 

[blackrose4me]

Dankeschöö für deine Antwort
Werde ich morgen sofort mal ausprobieren ^^

Momentan habe ich es mittels PHP gelöst, aber das ist in diesem Gebrauch nicht wirklich Vorteilhaft x) Von daher ist hier noch Verbesserungspotenzial mittels JavaScript von nöten