Funzioni in HTML

**MadWolf** · 09-11-2014, 22:22

Originariamente inviata da Tonenge

Ciao,
come indicato da vic53 userei un vettore di colori e successivamente assegnerei il nuovo background.
Forse non ho ben compreso le problematiche ma ti posto un esempio di riferimento.

Saluti

codice:

<!DOCTYPE>
<html>
  <head>
<script>

function f_cambiacolore(){
  var n=parseInt(Math.random() * 7), j,c;
  
  // vettore colori
  c=[               
    [255,255,0],
    [255,0,255],
    [223,223,223],
    [215,0,60],
    [0,80,80],
    [0,200,0],
    [1,40,50]
  ];

  j=document.getElementById("idsfondo");
  j.style.backgroundColor="rgba("+c[n][0]+","+c[n][1]+","+c[n][2]+",0.1)";  // cambio colore al background
  
  j.innerHTML=(n+1);
}


</script>  
  </head>
  <body>

  <button onclick='f_cambiacolore()'>Cambia colore</button> 
    
  <div id='idsfondo' style='background-color:#CCC;position:absolute;left:20px;top:80px;width:400px;height:300px;font:24px Arial;padding:20px;'></div>

  </body>
</html>

Ho provato a fare così, solo che la mia funzione fa un random fra diversi colori e semplicemente ne vorrei uno diverso ogni volta che la pagine viene caricata. Più precisamente voglio che avvenga per lo sfondo dei post quote.
Al momento sono messa così:

codice:

<html>
    <head>
    
    <script>
        
            function getRandomColor(){
                
                var num=Math.floor((Math.random()*7)+1);
                var color;
                var fontColor;
            
            	if(num==1){
            	    color="rgba(255, 239, 0, 0.2)";
            	    fontColor= "#FFEF00";
            	}
            		
            	if(num==2)
            		{color="rgba(255, 128, 0, 0.2)"; 
            		 fontColor= "#FF8000";   
            		}
            
            	if(num==3)
            		{color="rgba(223, 0, 0, 0.2)"; 
            		 fontColor= "#E90000";   
            		}
            
            	if(num==4)
            		{color="rgba(215, 255, 253, 0.2)";
            		 fontColor= "#D7FFFD";   
            		}
            
            	if(num==5)
            		{color="rgba(0, 212, 228, 0.2)"; 
            		 fontColor= "#00D4E4";   
            		}
            
            	if(num==6)
            		{color="rgba(0, 183, 48, 0.2)"; 
            		 fontColor= "#00B730";   
            		}
            
            	if(num==7)
            		{color="rgba(1, 1, 178, 0.2)";
            		 fontColor= "#0101B2";   
            		}
            	
            	document.getElementById('quote').style.background=color;
            }
            
        </script>

E non ho modificato altro, se provo a fare un return Color e poi un background: getRandomColor(); non cambia nulla, e con il codice che ho trascritto non funziona.

**badaze** · 09-11-2014, 22:28

E' background-color non background.

**MadWolf** · 09-11-2014, 22:38

Originariamente inviata da badaze

E' background-color non background.

Non funziona ugualmente :')

**badaze** · 09-11-2014, 22:54

Originariamente inviata da MadWolf

Non funziona ugualmente :')

Come dire.... La proprietà CSS per lo background si chiama background-color. Quindi questo è totalmente indipendente dal resto e significa che non avevi un solo problema ma almeno due.

**MadWolf** · 09-11-2014, 22:58

Originariamente inviata da badaze

Come dire.... La proprietà CSS per lo background si chiama background-color. Quindi questo è totalmente indipendente dal resto e significa che non avevi un solo problema ma almeno due.

Prima ho provato a mettere la funzione in fondo nel body, iniziandolo scrivendo <body onload return getRandomColor()> e con background funzionava, solo che mi modificava il colore di un solo post :')

**Tonenge** · 09-11-2014, 23:02

Potresti scrivere la parte del body con l'elemento "quote" a cui vuoi cambiare colore.

non capisco cosa intendi: quando dici "fare un return Color e poi un background: getRandomColor();"

codice:

<!DOCTYPE>
<html>
  <head>
<script>

function f_cambiacolore(){
  var n=parseInt(Math.random() * 7), j,c;
  
  // vettore colori
  c=[               
    [255, 239, 0, 0.2, "#FFEF00"],
    [255, 128, 0, 0.2, "#FF8000"],
    [223, 0, 0, 0.2, "#E90000"],
    [215, 255, 253, 0.2, "#D7FFFD"],
    [0, 212, 228, 0.2, "#00D4E4"],
    [0, 183, 48, 0.2, "#00B730"],
    [1, 1, 178, 0.2, "#0101B2"]
  ];

  j=document.getElementById("quote");
  
  // cambio colore al background
  j.style.backgroundColor="rgba("+c[n][0]+","+c[n][1]+","+c[n][2]+","+c[n][3]+")";  
  
  // cambio colore al testo
  j.style.color=c[n][4];
  
  j.innerHTML=(n+1);
}


</script>  
  </head>
  <body onload="f_cambiacolore()">
    
  <div id='quote' style='background-color:#CCC;position:absolute;left:20px;top:80px;width:400px;height:300px;font:24px Arial;padding:20px;'></div>

  </body>
</html>

**badaze** · 09-11-2014, 23:08

Mi sono sbagliato....

document.getElementById('quote').style.backgroundColor=color;

comunque se esegui la funzione prima della creazione dell'elemento 'quote' non funzionera'.

**MadWolf** · 09-11-2014, 23:13

Il punto è che prima funzionava mettendo la funzione nel body seppur prima del blocco del post quote, ma ripeto che modificava solo un post, e tutti gli altri rimanevano con il colore di sfondo generale.

Intendevo che alla fine della funzione non c'era nessun document.getElementById('quote').style.background=color;ma un return color. E poi nel blocco di caratteristiche del post di tipo quote, invece di scrivere background: white; o un colore qualsiasi ho scritto background: getRandomColor(), ma non funzionava.

**Tonenge** · 09-11-2014, 23:23

Non mi è chiaro se devi cambiare il colore all'elemento univoco con id "quote" oppure a più elementi magari con una stessa classe css?

**MadWolf** · 09-11-2014, 23:26

Teoricamente vorrei modificare lo sfondo all'intero post, quindi alla classe "post quote", ma è composta da più elementi e non conoscendo bene solo puro java mi verrebbe in mente di usare un for per modificare man mano lo sfondo di ogni elemento. Solo che non riesco nemmeno a modificare lo sfondo di un elemento :')

Discussione: Funzioni in HTML

Strumenti discussione

Ricerca discussione

Visualizza

Tag per questa discussione

Permessi di invio