[JScript] Div zichtbaar maken d.m.v. radiobutton keuze - Softwareontwikkeling

zaterdag 3 juli 2004 10:51

Acties:

Topicstarter

Op een HTML-pagina staan 2 radiobuttons en 2 div's. Nu wil ik dat div1 zichtbaar wordt (en div2 onzichtbaar) als radiobutton1 (rdo1) gechecked is. Div2 moet zichtbaar worden (en div1 onzichtbaar) als rdo2 is gechecked.

De volgende code heb ik hiervoor geschreven:

code:

<HTML>
    <HEAD>
        <title>frmTest2</title>
        <script language="javascript">
            <!--
            function Visible() {
                if (document.getElementById('rdo1').value = true) {
                    document.getElementById('div1').style.visibility = "visible";
                    document.getElementById('div2').style.visibility = "hidden";
                }
                else {
                    if (document.getElementById('rdo2').value = true) {
                        document.getElementById('div1').style.visibility = "hidden";
                        document.getElementById('div2').style.visibility = "visible";
                    }
                }
            }
            -->
        </script>
    </HEAD>
    <body MS_POSITIONING="GridLayout" onload="Visible();">
        <form id="Form1" method="post" runat="server">
            <INPUT id="rdo1" onclick="Visible();" type="radio" name="radio"
            CHECKED>Optie 1
            <INPUT id="rdo2" onclick="Visible();" type="radio" name="radio">Optie 2
            <DIV id="div1" style="Z-INDEX: 101; LEFT: 24px; WIDTH: 192px; 
            POSITION: absolute; TOP: 64px; HEIGHT: 64px" ms_positioning="FlowLayout">Div 1
            </DIV>
            <DIV id="Div2" style="Z-INDEX: 102; LEFT: 24px; WIDTH: 192px; 
            POSITION: absolute; TOP: 136px; HEIGHT: 64px" ms_positioning="FlowLayout">Div 2
            </DIV>
        </form>
    </body>
</HTML>

De javascript function 'Visible();' werkt echter niet goed. Ongeacht de check wordt altijd de eerste conditie gevolgd

. Wat is er fout?

zaterdag 3 juli 2004 10:52

Acties:

Verwijderd

document.getElementById('rdo1').value == true

overigens kan je beter checken op de checked property van een radio
bovendien: gooi eens een label element in je html, doe alles eens lowercase en zet een doctype boven je document (tips die verder geen zak met je probleem te maken hebben, maar wel met netjes html schrijven)

[ Voor 96% gewijzigd door Verwijderd op 03-07-2004 10:55 ]

zaterdag 3 juli 2004 10:55

Acties:

EmilneM

Topicstarter

Verwijderd schreef op 03 juli 2004 @ 10:52:
document.getElementById('rdo1').value == true

Top man! Werk normaal met VB dus was die dubbele '=' vergeten.

overigens kan je beter checken op de checked property van een radio
bovendien: gooi eens een label element in je html, doe alles eens lowercase en zet een doctype boven je document (tips die verder geen zak met je probleem te maken hebben, maar wel met netjes html schrijven)

Doctype heb ik hier ff weggelaten. De Uppercase properties worden gegenereerd door mijn ontwikkelomgeving. De checked property werkt idd beter. Tnx!

[ Voor 46% gewijzigd door EmilneM op 03-07-2004 10:59 ]

woensdag 7 juli 2004 12:44

Acties:

niXnut

Hora ruit; hora est!

ik zit met een vergelijkbaar probleem, kan iemand aub de veranderingen in de code posten zodat ie werkt? Met dubbele '=' werkt ie nog niet

[ Voor 15% gewijzigd door niXnut op 07-07-2004 12:44 ]

woensdag 7 juli 2004 13:14

Acties:

kleautviool

JavaScript:

1 2	if(document.forms['form'].elements['el'].checked == true) document.getElementById('el').style.display = "block"; else document.getElementById('el').style.display = "none";

woensdag 7 juli 2004 13:21

Acties:

niXnut

Hora ruit; hora est!

ik weet niet hoe je aan dit stuk code komt, maar dit werkt niet echt

woensdag 7 juli 2004 13:25

Acties:

BtM909

Watch out Guys...

niXnut schreef op 07 juli 2004 @ 13:21:
ik weet niet hoe je aan dit stuk code komt, maar dit werkt niet echt

Laat eens zien wat je al hebt?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 7 juli 2004 13:30

Acties:

André

Analytics dude

HTML:

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
      function Visible()
      {
        if (document.forms["Form1"].elements["bla"][0].checked)
        {
          document.getElementById("div1").style.visibility = "visible";
          document.getElementById("div2").style.visibility = "hidden";
        } else {
          document.getElementById("div1").style.visibility = "hidden";
          document.getElementById("div2").style.visibility = "visible";
        }
      }
    </script>
  </head>
  <body onload="Visible();">
    <form id="Form1" method="post">
      <input onclick="Visible();" type="radio" name="bla" CHECKED>Optie 1
      <input onclick="Visible();" type="radio" name="bla">Optie 2
      
      <div id="div1" style="Z-INDEX: 101; LEFT: 24px; WIDTH: 192px; POSITION: absolute; TOP: 64px; HEIGHT: 64px">Div 1</div>
      <div id="Div2" style="Z-INDEX: 102; LEFT: 24px; WIDTH: 192px; POSITION: absolute; TOP: 136px; HEIGHT: 64px">Div 2</div>
    </form>
  </body>
</html>

woensdag 7 juli 2004 13:34

Acties:

BtM909

Watch out Guys...

André schreef op 07 juli 2004 @ 13:30:
HTML:
1
 _/-\o_

Wat zijn sommige mensen toch goed voor de (GoT-)samenleving!

Dré, zie mijn sig

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 7 juli 2004 13:35

Acties:

André

Analytics dude

Yeah, ik heb 1 notch

woensdag 7 juli 2004 13:39

Acties:

Sorki

world wide wubbish

spijtig dat div2 op z'n plek blijft staan ..

het zou veel beter zijn mocht ie op de plaats van div1 komen te staan

Sorki#2242

woensdag 7 juli 2004 13:40

Acties:

André

Analytics dude

Sorki schreef op 07 juli 2004 @ 13:39:
spijtig dat div2 op z'n plek blijft staan ..

het zou veel beter zijn mocht ie op de plaats van div1 komen te staan

Sjonge jonge, verander de coordinaten dan even

woensdag 7 juli 2004 13:42

Acties:

Apolloc

verander

code:

1	absolute; TOP: 136px;

in

code:

1	absolute; TOP: 64px;

en dan heb je dat resultaat

woensdag 7 juli 2004 13:43

Acties:

Sorki

world wide wubbish

whoops ...

Sorki#2242

woensdag 7 juli 2004 17:33

Acties:

Theadalus

Nostalgist

Sorki schreef op 07 juli 2004 @ 13:39:
spijtig dat div2 op z'n plek blijft staan ..

het zou veel beter zijn mocht ie op de plaats van div1 komen te staan

Dan moet je style.display gebruiken i.p.v. style.visibility

code:

<html>
<head>
<title>frmTest2</title>
<script language="javascript">
<!--
function Visible()
{
  document.getElementById("div1").style.display = (document.Form1.rdo[0].checked ? "block" : "none");
  document.getElementById("div2").style.display = (document.Form1.rdo[1].checked ? "block" : "none");
}
-->
</script>
</head>
<body onload="Visible()">
<form name="Form1" method="post" runat="server">
 <input type="radio" name="rdo" onclick="Visible()" CHECKED>Optie 1
 <input type="radio" name="rdo" onclick="Visible()">Optie 2
 <div id="div1" style="left: 24px; width: 192px; height: 64px">Div 1</div>
 <div id="div2" style="left: 24px; width: 192px; height: 64px">Div 2</div>
</form>
</body>
</html>

Computing...

woensdag 7 juli 2004 22:49

Acties:

André

Analytics dude

Theadalus schreef op 07 juli 2004 @ 17:33:
[...]

Dan moet je style.display gebruiken i.p.v. style.visibility

Maak geen bal uit als je position: absolute gebruikt.