JS div ein/ausblenden je nach radiobutton auswahl

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

0:10, 18.9.2010

so nicht schlagen fange gerade erst mit JS an habe aber gerade irgendwie ein Verständnissproblem. Also bitte Code nicht nur berichtigen sondern auch erklären warum.

Den ersten Radio möchte ich gern von vornherein ausgewählt haben, darum checked, aber anscheinend sorgt das schon für Probleme im JS.
Folgendes beabsichtige ich. Wenn radio file aktiv ist, soll nur der div fileup angezeigt werden und umgekehrt ist radio serv aktiv, soll nur der div filedown zu sehen sein.
Das Ergebniss sieht leider total anders aus.

<form action="">
	<p>Wie wollen Sie updaten?</p>
	<p>
		<input checked type="radio" id="file" name="src" value="file" onclick="auswahl()"> aus Datei<br>
		<input type="radio" id="serv" name="src" value="serv" onclick="auswahl()"> vom Server<br>
	</p>
</form>

<script type="text/javascript">
		function auswahl(){
			if (document.getElementById("file").checked=true) {
			document.getElementById("fileup").style.visibility = 'hidden';
			document.getElementById("filedown").style.visibility = 'visible';
			}

			else {
			document.getElementById("fileup").style.visibility = 'visible';
			document.getElementById("filedown").style.visibility = 'hidden';			
			}
		}
</script>


<div id="fileup">aus Datei hochladen</div>

<div id="filedown">vom Server hochladen</div>

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

vertico

vertico hat kostenlosen Webspace.

0:36, 18.9.2010

if (document.getElementById("file").checked=true) {

Durch das einfache = weist du dem radio immer true zu. Wenn du daraus ein == machst funktioniert es. Dass = ist eine Zuweisung, das == steht für ist-gleich.

<head>

<script type="text/javascript">
        function auswahl(){
            if (document.getElementById("file").checked == true) {
            document.getElementById("fileup").style.visibility = 'visible';
            document.getElementById("filedown").style.visibility = 'hidden';
            }

            else {
            document.getElementById("fileup").style.visibility = 'hidden';
            document.getElementById("filedown").style.visibility = 'visible';
            }
        }
</script>

</head>

<body>
<form action="">
    <p>Wie wollen Sie updaten?</p>
    <p>
        <input type="radio" id="file" name="src" value="file" onclick="auswahl()" checked="checked"  /> aus Datei<br />
        <input type="radio" id="serv" name="src" value="serv" onclick="auswahl()" /> vom Server<br />
    </p>
</form>


<div id="fileup">aus Datei hochladen</div>

<div style="visibility: hidden" id="filedown">vom Server hochladen</div>

</body>

Du hast aber im JS-Teil die Werte vertauscht, ich habs hier mal korrigiert. Außerdem habe ich dem 2ten Div direkt ein hidden gegeben, da ja radio 1 zu Beginn aktiviert sein soll und es ja unsinnig ist, am anfang beide Divs sichtbar zu haben.

Beitrag zuletzt geändert: 18.9.2010 0:41:00 von vertico

Autor dieses Themas
juwie69

juwie69 hat kostenlosen Webspace.

9:05, 18.9.2010
ah verdammt das ich an sowas kleinen scheiter ....
na jedenfalls danke nun gehts
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city