Problema con Funzioni:aprire contenuto di una select,sfoltire codice con array

**eonta** · 19-02-2013, 17:12

Salve a tutti; provo ad esporre i miei problemi:
1)ho un form con all'interno due select in cui (per mezzo di una funzione) i contenuti della prima sono collegati alla seconda; una volta compiuta la seconda selezione tramite un tasto button vorrei far aprire i contenuti (una tabella) riferita alla scelta precedenetemente effettuata.
Così come ho scritto il codice sono presenti tutte e 4 le tabelle, ma io vorrei farle apparire solo quando le seleziono ed ho premuto il pulsante.

2)
La funzione massimale() fa un banale colcolo di perncentuali in base ad un valore inserito.
Quello che mi domando è se esiste un modo con gli array o con un altro metodo per sfoltire il codice, oppure va bene così com'è.

Grazie per l'attenzione

codice:

<html>
<head>
<title>Programma scheda Sportiva</title>
</head>
<style type="text/css">

.corpo{
 color: black;
 }                       
         	 
  .bottone{
                font-weight:bold;
                background-color:#00F;
                font-family:Tahoma, Geneva, sans-serif;
                color:#000;
                font-size:14px;
                text-align:justify;
            }
		 
#i1
{
z-index:1;
padding:1em;
line-height: 20pt;
border:1px solid black;
padding-bottom: 1px;
position: absolute;
top: 15px;
left: 20px;
background-color: C0C0C0;
color: black;
}

#Bulgaro
{
z-index:2;
padding:1em;
line-height: 20pt;
border:1px solid black;
padding-top: 2px;
padding-bottom: 5px;
position: absolute;
top: 150px;
left: 20px;
background-color: #F0FFFF;
color: black;
}

#Harre
{
z-index:3;
padding:1em;
line-height: 20pt;
border:1px solid black;
padding-top: 2px;
padding-bottom: 5px;
position: absolute;
top: 150px;
left: 445px;
background-color: #00BFFF;
color: black;
}

#Light
{
z-index:4;
padding:1em;
line-height: 20pt;
border:1px solid black;
padding-top: 2px;
padding-bottom: 5px;
position: absolute;
top: 440px;
left: 20px;
background-color: #00BFFF;
color: black;
}

#Heavy
{
z-index:4;
padding:1em;
line-height: 20pt;
border:1px solid black;
padding-top: 2px;
padding-bottom: 5px;
position: absolute;
top: 440px;
left: 345px;
background-color: #00BFFF;
color: black;
}

</style>

<script language="javascript">

function Massimale() {    
                var d,g,f,h,i,l,m,n,o,p,w,y,h1,h2,h3,h4,h5,z1,z2,z3,z4,z5,z6,z7,z8,z9,z10,z11,z12,z13,z14,z15,z16,z17,
                f = 90;
				h = 50;
				i = 60;
				l = 70;
				m = 80;
				n = 30;
				o = 35;
				p = 40;
				g = 100;
				h1 = 92.5;
				h2 = 77.5;
				h3 = 40;
				h4 = 50;
				h5 = 32.5;
				h6 = 95;
				h7 = 85;
				h8 = 75;
				h9 = 66;
				
				/*"Bulgaro"*/
				d = parseInt(document.sommare.d.value);
                w = parseInt(d*f/g);
                document.sommare.w.value = w +"kg";
				d = parseInt(document.sommare.d.value);
				y = parseInt(d*h/g);
                document.sommare.y.value = y +"kg";	
				/*"Harre"*/
				d = parseInt(document.sommare.d.value);
				z7 = parseInt(d*h1/g);
                document.sommare.z7.value = z7 +"kg";
				d = parseInt(document.sommare.d.value);
				z8 = parseInt(d*h2/g);
                document.sommare.z8.value = z8 +"kg";
				d = parseInt(document.sommare.d.value);
				z9 = parseInt(d*h3/g);
                document.sommare.z9.value = z9 +"kg";
				d = parseInt(document.sommare.d.value);
				z10 = parseInt(d*h4/g);
                document.sommare.z10.value = z10 +"kg";
				d = parseInt(document.sommare.d.value);
				z11 = parseInt(d*h5/g);
                document.sommare.z11.value = z11+"kg";
				/*"Light to heavy"*/
				d = parseInt(document.sommare.d.value);
                z12 = parseInt(d*h/g);
                document.sommare.z12.value = z12 +"kg";
				d = parseInt(document.sommare.d.value);
                z13 = parseInt(d*h9/g);
                document.sommare.z13.value = z13 +"kg";
				d = parseInt(document.sommare.d.value);
                z14 = parseInt(d*g/g);
                document.sommare.z14.value = z14 +"kg";
				/*"Heavy to Light"*/			
				d = parseInt(document.sommare.d.value);
                z15 = parseInt(d*g/g);
                document.sommare.z15.value = z15 +"kg";
				d = parseInt(document.sommare.d.value);
                z16 = parseInt(d*h9/g);
                document.sommare.z16.value = z16 +"kg";
				d = parseInt(document.sommare.d.value);
                z17 = parseInt(d*h/g);
                document.sommare.z17.value = z17 +"kg";
				
				
			}	

	// Funzione da FORUM  	
function aggiornaOpzioni(scelta){
        var select = document.getElementById("metodall");
        var scelte = new Array();
        switch(scelta) {
            case '1':                
                scelte[0] = "Test di Harre";
                scelte[1] = "Metodo Bulgaro";
           
                break;
            case '2':                
                scelte[0] = "LIGHT TO HEAVY SYSTEM";
                scelte[1] = "HEAVY TO LIGHT SYSTEM";
                
                break;
            default:
                    
                break;
        }         
        // azzero le option            
        select.options.length = 1;
        // creo le option in base agli elementi degli array
        for(var i=0; i<scelte.length; i++) {                
            select.options[select.options.length] = new Option(scelte[i],scelte[i]);        
        }   
      document.getElementById("scelta").style.display="none"; 
    
	}
</script>

<div id="Bulgaro">
<form method="post" name="sommare">
<table border="1">
    <tr>
       METODO BULGARO
   </tr>
    <tr>
      <td><label class="Bulgaro">%DEL MAX</label></td>
      <td>RIPETIZIONI</td>
      <td>SERIE</td>
      <td>VELOCITA'</td>  
   </tr>
     <tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="w"></td>
   <td>1-4</td>
   <td>1</td>
   <td>MODERATA</td>
   </tr>
   <tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="y"></td>
   <td>4-8</td>
   <td>1</td>
   <td>MASSIMA</td>
   </tr>
</table>
</div>	


<div id="Harre">
<form method="post" name="sommare">
<table border="1">
    <tr>
       TEST DI HARRE
   </tr>
    <tr>
      <td><label class="HARRE">%1 RM</label></td>
      <td>RIPETIZIONI</td>
      <td>VELOCITA'</td>
      <td>RECUPERO</td>  
      <td>SPECIFICITA'</td>    
   </tr>
     <tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="z7"></td>
   <td>1-5</td>
   <td>BASSA</td>
   <td>3-5'</td>
   <td>FORZA MASSIMALE</td>
   </tr>
   <tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="z8"></td>
   <td>5-10</td>
   <td>BASSA</td>
   <td>2-4'</td>
    <td>FORZA MAX IPERTROFIA</td>
   </tr>
   <tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="z9"></td>
   <td>6-10</td>
   <td>MASSIMA</td>
   <td>4-6'</td>
    <td>FORZA VELOCE</td>
   </tr>
     <tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="z10"></td>
   <td>20-30</td>
   <td>BASSA</td>
   <td>35-40''</td>
    <td>FORZA RESISTENTE</td>
   </tr>
   <tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="z11"></td>
   <td>25-30</td>
   <td>MODERATA</td>
   <td>OTTIMALE</td>
    <td>FORZA RESISTENTE</td>
   </tr>
   </table>
</div>

<div id="Light">
<form method="post" name="sommare">
<table border="1">
    <tr>
       LIGHT TO HEAVY
   </tr>
    <tr>
      <td><label class="Light">%1 RM</label></td>
      <td>RIPETIZIONI</td>
      <td>SERIE</td>
      </tr>
<tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="z12"></td>
<td>10</td>
<td>1</td>
</tr>

<tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="z13"></td>
<td>10</td>
<td>1</td>
</tr>

<tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="z14"></td>
<td>10</td>
<td>1</td>
</tr>
  </table>
</div>

<div id="Heavy">
<form method="post" name="sommare">
<table border="1">
    <tr>
       HEAVY to LIGHT  
   </tr>
    <tr>
      <td><label class="Heavy">%1 RM</label></td>
      <td>RIPETIZIONI</td>
      <td>SERIE</td>
      </tr>
<tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="z15"></td>
<td>10</td>
<td>1</td>
</tr>

<tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="z16"></td>
<td>10</td>
<td>1</td>
</tr>

<tr>
<td><input type="text"  size="4" class="corpo" name="Massimale()" disabled="disabled" readonly="readonly" id="z17"></td>
<td>10</td>
<td>1</td>
</tr>
  </table>
</div>

<div id="i1">
<form name="som">


ETA'
<input type="text" size="5" name="search string">

<tr><td><label class="i1">PESO</label></td>
<td><input type="text" size="5" class="corpo" id="b"></td></tr>


ALTEZZA
<input type="text" size="5" name="search string">

<tr><td><label class="i1">MASSIMALE</label></td>
<td><input type="text" size="5" class="corpo" id="d"></td></tr>




SCEGLI OBBIETTIVO
<select name="obbiet" size ="1" onchange="aggiornaOpzioni(this.options[this.selectedIndex].value);">
<option selected></option>
<option value="1">Forza</option>
<option value="2">Massa</option>
</select>
SCEGLI METODO ALLENAMENTO
<select id="metodall" name="metodall"  size ="1">
<option selected></option>
</select>
</form> 
<tr><td><input type="button" onClick="Massimale()" class="bottone" value="CALCOLA"></td></tr>

</div>

</body>
</html>

**eonta** · 20-02-2013, 12:17

Consigli

?

**cavicchiandrea** · 20-02-2013, 16:44

1) Per mostrare solo quello che vuoi devi inizialmente rendere le tabelle nascoste con display:none e in base ad un if mostri quello che vuoi.
2) Se funziona non preoccupati più di tanto, non è una funzione cosi complessa e pesante da richiedere un ottimizzazione, oltretutto per ottimizzare il codice si deve conoscere bene il progetto

**eonta** · 20-02-2013, 17:48

Grazie della risposta..
1)

Per mostrare solo quello che vuoi devi inizialmente rendere le tabelle nascoste con display:none

fin qui ci siamo

in base ad un if mostri quello che vuoi.

è proprio qui che ho bisogno di un aiuto..
Ti scrivo la parte di codice in questione:

codice:

function aggiornaOpzioni(scelta){
 var select = document.getElementById("metodall");
 var scelte = new Array();
 var seleziona;
    switch(scelta) {
            case '1':                
                scelte[0] = "Test di Harre";
                scelte[1] = "Metodo Bulgaro";
           
                break;
            case '2':                
                scelte[0] = "LIGHT TO HEAVY SYSTEM";
                scelte[1] = "HEAVY TO LIGHT SYSTEM";
              
             break;
            default:
                  
              break;
        }         
    
    select.options.length = 1;
        for(var i=0; i<scelte.length; i++) {                
        select.options[select.options.length] = new Option(scelte[i],scelte[i]);        
		  }

2)In questo caso ho una formula (x*y/z),apparte "z" che è fisso,"x" sarà un valore inserito dall'utente e "y" una valore sempre diverso (nello specifico è una percentuale):
rispetto a quest'ultimo dato mi chiedevo se c'è un modo per evitare di dover scrivere tutte le variabili numeriche riferite alle percentuali.Pensavo agli array,ma sinceramente non ho idea da dove cominciare..

Grazie

**cavicchiandrea** · 20-02-2013, 19:18

1) Non ho tempo di studiarmelo (oltretutto ci ho capito poco) forse usando if (al posto dello switch) ti viene meglio
2) Insisto se funziona lascia tutto cosi

Discussione: Problema con Funzioni:aprire contenuto di una select,sfoltire codice con array

Strumenti discussione

Ricerca discussione

Visualizza

Problema con Funzioni:aprire contenuto di una select,sfoltire codice con array

Permessi di invio