jak powiazac radiobutton z <a href>?

Thread View: pl.comp.lang.javascript

4 messages

[T] Back to Threads [V] Tree View [G] Group Articles

4 total messages Started by soonic Thu, 21 Apr 2011 21:31

#50730

Author: soonic
Date: Thu, 21 Apr 2011 21:31

36 lines
2041 bytes

Witam

Borykam się z następującym problemem z wyswietlaniem zdjeć w zależności 
które pole typu "radio" zostało zaznaczone. Wstępnie mam taki kod na 
potrzeby zilustrowania problemu. Ładuje zdjęcie do bloku div za pomocą 
funkcji "show" w JS. Mam 3 zdjęcia dla każdego pola radio. Jak funkcja 
"show" powinna wyglądać aby wykorzystując te 3 znaczniki <a href> 
wyświetlały plik pic#_#value w zależności od wyboru pola "radio"? Nie 
umiem tego technicznie zaprogramować (dopiero się uczę, poniższa funkcja 
nie jest moja).

<head>
<style>
     #show { width: 100px; height: 100px; border:1px solid red }
     img {width: 100px; height: 100px;}
</style>
<script>
     function show(link) {
     document.getElementById("show").innerHTML ='<img src=' + link.href 
+ ' alt="">';
   return false; }
</script>

</head>
<body>
   <INPUT TYPE="radio" NAME="t" VALUE="1">temat1<br>
   <INPUT TYPE="radio" NAME="t" VALUE="2">temat2<br>
   <INPUT TYPE="radio" NAME="t" VALUE="3">temat3<br>

   <a href="pic01_#VALUE.jpg" onclick="return show(this)">test1</a>
   <a href="pic02_#VALUE.jpg" onclick="return show(this)">test2</a>
   <a href="pic03_#VALUE.jpg" onclick="return show(this)">test3</a>

  <div id="show" ></div>

</body>

Re: jak powiazac radiobutton z <a href>?

#50731

Author: soonic
Date: Fri, 22 Apr 2011 10:30

42 lines
2145 bytes

jakby ktoś początkujący stałby przed podobnym problemem to
udało mi się samemu rozwiązać mój problem z pomocą strony
http://www.geekpedia.com/tutorial194_Using-radio-buttons-with-JavaScript.html

po której mój kod (w celu ilustracji opisanego problemu) wygląda tak:

<html>
   <head>
   <style>
     #show { width: 100px; height: 100px; border:1px solid red }
     img {width: 100px; height: 100px;}
   </style>
   <script>
     function show(link) {
       for (i=0; i<document.myform.same.length; i++)
       {
         if (document.myform.same[i].checked==true)
         {
           t=document.myform.same[i].value + '.gif'
         }
       }
       document.getElementById("show").innerHTML ='<img src=' + 
link.href + t + ' alt="">';
       return false; }
   </script>

   </head>
   <body>
   <form name="myform">
     <INPUT TYPE="radio" NAME="same" VALUE="1">temat1<br>
     <INPUT TYPE="radio" NAME="same" VALUE="2">temat2<br>
     <INPUT TYPE="radio" NAME="same" VALUE="3">temat3<br>
   </form>

   <a href="pic01_.jpg" onclick="return show(this)">test1</a>
   <a href="pic02_.jpg" onclick="return show(this)">test2</a>
   <a href="pic03_.jpg" onclick="return show(this)">test3</a>

   <div id="show" ></div>

   </body>
</html>

Re: jak powiazac radiobutton z <a href>?

#50732

Author: porneL
Date: Fri, 22 Apr 2011 14:23

25 lines
1603 bytes

On Fri, 22 Apr 2011 11:30:33 +0100, soonic <xxsoonic@op.pl> wrote:

> jakby ktoś początkujący stałby przed podobnym problemem to
> udało mi się samemu rozwiązać mój problem z pomocą strony
> http://www.geekpedia.com/tutorial194_Using-radio-buttons-with-JavaScript.html
>
> po której mój kod (w celu ilustracji opisanego problemu) wygląda tak:
>
> <html>
>    <head>
>    <style>
>      #show { width: 100px; height: 100px; border:1px solid red }
>      img {width: 100px; height: 100px;}
>    </style>
>    <script>
>      function show(link) {
>        for (i=0; i<document.myform.same.length; i++)

document.forms.myform.

Wersja z document.nazwa nie zawsze działa. Strony/tutoriale/książki z taką  
składnią są zazwyczaj przestarzałe i nie warte uwagi.

-- 
regards, porneL

Re: jak powiazac radiobutton z <a href>?

#50733

Author: soonic
Date: Fri, 22 Apr 2011 15:05

11 lines
1154 bytes

>
> document.forms.myform.
>
> Wersja z document.nazwa nie zawsze działa. Strony/tutoriale/książki z
> taką składnią są zazwyczaj przestarzałe i nie warte uwagi.
>

dzięki za uwagę, zmienię na prawidłową wersję.

s.

Thread Navigation

This is a paginated view of messages in the thread with full content displayed inline.

Messages are displayed in chronological order, with the original post highlighted in green.

Use pagination controls to navigate through all messages in large threads.

Back to All Threads