2010-10-18 16 views
8

Cóż, po godzinnym wprowadzeniu do javascripta wymyślę następujący kod. Zrobiłem to, co chciałem, ale potem chciałem czegoś innego i to nie zadziała.Wyświetlanie warunkowe elementów formularzy html

Chciałem, że po kliknięciu przycisku, pewne pole zostanie ukryte, a po kliknięciu innego tak, inne też się ukryje, ALE oczywiście musi wykonać drugie przedstawienie, w przeciwnym razie skończymy z nic, a celem było przedstawienie różnych pól w zależności od tego, co użytkownik kliknął (na przycisku radiowym) Więc w dziecinny sposób stworzyłem mój kod i zadziałało. Ale potem przyszło mi do głowy, że najpierw chciałem ukryć oba pola zamiast obu pokazanych pól, a tutaj jest problem. Dodałem wartość 0 do parametru funkcji "telling", że gdy x = 0, to widoczność = ukryta. Ale mnie nie posłucha !, A więc część kodu, gdy mówi x = 1 i 2 działa, ta o 0, nie.

To taki prosty kod, który może sprawić, że ktoś się uśmiechnie, ale do cholery, to było czyste i działało. Czy ktoś wie, jak ukryć pola przed kliknięciem przycisków?

dziękuję usunąć niektóre znaczniki HTML

<html> 
    <head> 
     <script language="javascript"> 
      var x = 0; 

      function hola(x) { 
       if(x == 0) { 
        document.getElementById("cont1").style.visibility="hidden"; 
        document.getElementById("cont2").style.visibility="hidden"; 
       } 

       if(x == 1) { 
        document.getElementById("cont1").style.visibility="visible"; 
        document.getElementById("cont2").style.visibility="hidden"; 
       } 

       if(x == 2) { 
        document.getElementById("cont1").style.visibility="hidden"; 
        document.getElementById("cont2").style.visibility="visible"; 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <input type="button" onclick="hola(1)" value="hidefield2" id="boton1"> 
     <div id="cont1"> 
      <input type="text"> 
     </div> 

     <input type="button" onclick="hola(2)" value="hidefield1" id="boton2"> 

     <div id="cont2"> 
      <input type="text"> 
     </div> 
    </body> 
<html> 
+0

NIE myślisz, że powinieneś ** wywołać ** funkcję z 0 jako parametrem w pewnym momencie? – Pointy

+0

Witam, dziękuję za poświęcenie czasu, aby rzucić okiem na moje pytanie. Jak na twój komentarz, myślę, że zrobiłem to dobrze na samym początku, postawiłem x = 0, ale teraz, kiedy to mówisz, przychodzę do głowy, że ta zmienna nie ma mocy, aby przekroczyć linię początkową funkcja, to znaczy funkcja może nie być świadoma przypisania od 0 do x linii powyżej. Dlatego też, jeśli domyślnie jest to naturalnie, widzialność widoczna, dlatego i ponieważ nie było dalszego przypisania, pozostaje. Następnie wyjaśnienie zachowania musi prawdopodobnie polegać na tym, że wartość X = 0 zadeklarowana przed funkcją nie jest globalna. – Alvaro

Odpowiedz

6

Co pracował:
Miałeś dwa przyciski, oba widoczne na początku . Po kliknięciu jednego przycisku ukryłeś div, a drugi stał się widoczny.

Teraz potrzebna jest sytuacja, w której elementy div powinny być ukryte na początku, a następnie wyświetlane po kliknięciu przycisku.

Domyślnie dla wszystkich elementów, w których nie podano jawnego atrybutu visibility, za visibility uważa się visible.

Aby przycisk był niewidoczny, należy dodać przycisk visibility:hidden do przycisku.

Można zrobić to na dwa sposoby:

  1. w kodzie dla div s sprawiają, że wtedy „niewidzialna domyślnie” dodając style='visibility:hidden'.

  2. Dodaj kolejny funkcji javascript, która jest wywoływana po wczytaniu strony, i sprawia, że ​​zarówno DIV niewidoczny:

    function hideBoth() 
    { 
        document.getElementById("cont1").style.visibility="hidden"; 
        document.getElementById("cont2").style.visibility="hidden" ; 
    } 
    

Nazwać na obciążenie swojej stronie: <body onload='hideBoth()'>

+0

Dziękuję obaj komentatorzy: Moje wnioski po pracy z twoimi propozycjami są: 1) myślę, że powodem problemu, że przydział x = 0 nie zadziałałby pomimo wyraźnego wezwania do tego jest to, że X został umieszczony na zewnątrz powyżej przed rozpoczęciem funkcji. 2) Jeśli zakodowałem na sztywno widoczność ukrytą w znaczniku HTML, chociaż ją ukryłem, nie wyświetliłoby się po kliknięciu przycisków. 3) Wreszcie wywołanie onload funkcji z ciała i dodanie funkcji hideboth dało podstęp. Dziękuję Ci bardzo. Alvaro – Alvaro

3

Linia:

document.getElementById("cont1").style.visibility="hidden"; 

Dodaje to:

style="visibility: hidden;" 

do tego:

<div id="cont1"> 

aby wyglądać tak:

<div id="cont1" style="visibility: hidden;"> 

Można to zrobić samemu, po prostu przez dodanie tego atrybutu do tagu html.


O tak, i tak:

<div id="cont1"> 

jest taki sam jak ten:

<div id="cont1" style="visibility: visible;">