[javascript] skrypt wyboru Opcje

[mari6274]

Mógłby mi ktoś powiedzieć, czy taki skrypt ma prawo działać Jesli nie to dlaczego, jeśli tak to co robie źle, że nie działa mi prawidłowo.

[HTML] pobierz, plaintext 
<p>
 
				<input  type='radio' name='typg' id='1' value='1' checked='checked'>
				<input  type='radio' name='typg' id='2' value='2'>
</p>
 
      <script>
 
            document.getElementById('d2').style.display = 'none';
            if(document.getElementById(1).checked) {
            document.getElementById('d1').style.display = 'block';
            document.getElementById('d2').style.display = 'none';
            }
            else if(document.getElementById(2).checked) {
            document.getElementById('d2').style.display = 'block';
            document.getElementById('d1').style.display = 'none';
            }
 
			</script>
 
<p>
			<div id='d1'>
 
 
              //skrypt JS
 
 
			</div>
			<div id='d2'>
 
              //Kod HTML
              //+
              //Skrypt JS
 
 
			</div>
</p>
[HTML] pobierz, plaintext 

[kamil4u]

getElementById(1)

ID nie może być liczbą. I jeśli już to musisz użyć cudzysłowowa.

Jeżeli nadal nie działa to będę szukał dalej

--edit--
I zawsze patrz do konsoli błędów.

Ten post edytował kamil4u 8.05.2012, 14:48:29

[mortus]

Według specyfikacji wartość atrybutu id elementu HTML nie może być cyfrą, liczbą, a nawet nie może się cyfrą rozpoczynać. Problemem jest jednak nieprawidołowy argument metody getElementById, bo powinien on być objęty cudzysłowami lub apostrofami. Poza tym skrypt powinien się raczej znaleźć za div-ami d1 i d2, bo wcześniej te elementy mogą być niezdefiniowane (undefined). Jednak lepiej (zgodnie z dokumentacją HTML) będzie tak:

[HTML] pobierz, plaintext 
<p>
  <input type='radio' name='typg' id='typg_1' value='1' checked='checked'>
  <input type='radio' name='typg' id='typg_2' value='2'>
</p>
<p>
  <div id='d1'>
  </div>
  <div id='d2'>
  </div>
</p>
<script>
  document.getElementById('d2').style.display = 'none';
  if(document.getElementById('typg_1').checked) {
    document.getElementById('d1').style.display = 'block';
    document.getElementById('d2').style.display = 'none';
  } else if(document.getElementById('typg_2').checked) {
    document.getElementById('d2').style.display = 'block';
    document.getElementById('d1').style.display = 'none';
  }
</script>
[HTML] pobierz, plaintext 

[mari6274]

Jest problem. Zawartość diva pojawia się po wybraniu opcji i odświeżeniu strony, a nie o to mi chodziło :/

[kamil4u]

A o co Ci chodziło? Tak napisałeś ten kod. Prawdopodobnie chodzi Ci o zmianę dynamiczną. W takim przypadku dodaj do checkbox zdarzenie onchange z funkcją, która zawiera to co w powyższych postach.

[mari6274]

O właśnie!! o to mi chodziło, bo próbowałem z funkcją onclick ale to mi nie pasowało. Sprawdzimy, dzięki

Edit <----------------
Jednak nie widzę zbytniej różnicy pomiędzy onclick a onchange :/ myślałem, że to mi da wybór już na starcie.

Teraz mam taki kod:

[HTML] pobierz, plaintext 
<p>
    <input onchange="zmiana('1')" type='radio' name='typg' id='typg_1' value='1' checked='checked'>Opcja 1
    <input onchange="zmiana('2')" type='radio' name='typg' id='typg_2' value='2'>Opcja 2
</p>
          <p>
 
			<div id='d1'>
 
			</div>
 
			<div id='d2'>
 
			</div>
 
          <script>
          //document.getElementById('d2').style.display = 'none';
          function zmiana(wybor) {
          if(wybor == 1) {
          document.getElementById('d1').style.display = 'block';
          document.getElementById('d2').style.display = 'none';
          } else if(wybor == 2) {
          document.getElementById('d2').style.display = 'block';
          document.getElementById('d1').style.display = 'none';
          }
          }
          </script>    
 
      </p>
[HTML] pobierz, plaintext 

Bez skomentowanej linijki przy załadowaniu strony divy się na siebie nakładają, a z nią nie wyświetla się wgl drugi div. Pomijając już problemy po odświeźeniu strony..

Ten post edytował mari6274 8.05.2012, 18:47:29

[kamil4u]

Zapewne musisz wykorzystać zdarzenie onload

[mari6274]

Za funkcją dodałem jeszcze wywołanie funkcji z parametrem 1. I niby wszystko w porządku. Ale tylko w wypadku, gdy zamieniłem divy kolejnością. Ponieważ w tym drugim divie znajduje się skrypt z galerią jQuery Roundabout. Ta galeria ma jakieś problemy z wyświetlaniem się. Jeśli jest w pierwszym divie to działa, jesli w drugim to nie. Dlaczego??

Dodatkowo, jeszcze zależy mi na tym, by po wczytaniu strony pojawiał się standardowo 1. div a po odświeżeniu pozostawał aktualnie zaznaczony. Niestety na tym etapie tego nie ma :/