Come cambiare sfondo body con Javascript

**FilippoDalla** · 07-03-2016, 15:55

Salva a tutti utenti di html.it ,
volevo chiedere come posso utilizzare i valori scritti dall'utente in appositi input di testo per cambiare (una volta cliccato il bottone) lo sfondo della pagina .

inoltre vorrei sapere come cambiare il colore dello sfondo con input type="color".

Se avete consigli ditemi senza peli sulla lingua. Grazie in anticipo

ecco qui il codice :

codice:

<!DOCTYPE html>
<html>
    <head>
        <title>Scelta Colore</title>
        
        
        <style>
            
            .Sfondo {
                background-color:#ff00ff;
                }
        
            .Titolo {
                
                border: outset; padding: 12px; border-width: thick;
                
                width: 30%; margin: auto;
                
                text-align: center; font-size: 35px; font-weight: 600;
                
                background-color:#ffffff;
                
                }
             
             .TabellaColori {
                
                border: inset ; border-width: thick; border-spacing: 30px 25px;
                
                width: 33%; margin: auto;
                
                background-color:#ffffff;
                
                }
             
        </style>
        
        
        
        <script src="ChangeColor.js"></script>
       
        
        
    </head>
    
    <body name="Corpo" id="Sfondo">
       <p class="Titolo">Scelta Colore</p>
       
       <br><br>
       
       <font name="FormColori">
            <table  class="TabellaColori" >
                
                <tr>
                    <td><input type="text" maxlength="3" id="ColoreRosso" name="ColoreRosso"                            placeholder="inserisci valore da 0 a 255" size="29"></td>
                    <td>VALORE ROSSO</td>
                </tr>
                
                <tr>
                    <td><input type="text" maxlength="3" id="ColoreVerde" name="ColoreVerde"                      placeholder="inserisci valore da 0 a 255" size="29"></td>
                    <td>VALORE VERDE</td>
                </tr>
                
                <tr>
                    <td><input type="text" maxlength="3" id="ColoreBlu" name="ColoreBlu"                                 placeholder="inserisci valore da 0 a 255" size="29"></td>
                    <td>VALORE BLU</td>
                </tr>
                
                <tr>
                    <td><input type="color"  value="#ffffff"> </td>
                    <td>Oppure Clicca Qui</td>
                </tr>
                
                <tr>
                    <td>
                        <button id="ChangeColor" name="Bottone1                                  onclick="ChangeColor()">Clicca</button>
                    </td>
                </tr>
             
             </table>
                 
       </font>     
    </body>
</html>    


Qui invece il codice Javascript che ho fatto (ciò che manca spero che me lo diciate voi): 

function ChangeColor() {
    
    var Red = document.FormColori.ColoreRosso.value;
    var Green = document.FormColori.ColoreVerde.value;
    var Blu = document.FormColori.ColoreBlu.value;
    }

**ciro78** · 07-03-2016, 17:23

Ciao e benvenuto sul forum,
ti invito a leggere il regolamento in particolare la sezione che riguarda i titoli e l'utilizzo del tag code.

**FilippoDalla** · 07-03-2016, 20:02

scusa non riesco a trovare dove sia il regolamento . saresti così gentile da indicarmelo?

**ciro78** · 07-03-2016, 23:38

Originariamente inviata da FilippoDalla

scusa non riesco a trovare dove sia il regolamento . saresti così gentile da indicarmelo?

magari tra le discussioni in evidenza

http://forum.html.it/forum/showthrea...hreadid=125610

**FilippoDalla** · 08-03-2016, 00:54

Si grazie mille , sai , sono nuovo ..
Volevo chiedere se si può scrivere nei CSS background_color : RGB(x,y,z) dove x,y,z sono variabili JavaScript che hanno il valore (numerico da 0 a 255)

Sarei tentato di chiedere delle alternative , però adesso so che non si può .

.

**cavicchiandrea** · 08-03-2016, 07:27

No non puoi modificare/ scrivere nel css, puoi modificarlo tramite js tipo document.body.style.backgroundColor='RGB('+X+','+y +','+z+')' (è solo un esempio è della sintassi non sono sicuro non scrivo js da un bel po') il tutto dovrà essere racchiuso in una funzione è comandato da un evento. Se cerchi nella sezione script qui di html trovi

**FilippoDalla** · 08-03-2016, 16:21

grazie mille .. mi hai chiarito un po' le idee.

comunque mi dispiace ma , siccome sto studiando javascript da autodidatta e sono studente delle superiori di certo non utilizzerò il tuo servizio..

**FilippoDalla** · 08-03-2016, 17:24

ho modificato in questo modo la parte javascript . il problema è che una volta cliccato il bottone la pagina diventa del colore desiderato per poi subito tornare bianca..

come mai??

function ChangeColor() {

var Red = document.FormColori.ColoreRosso.value;
var Green = document.FormColori.ColoreVerde.value;
var Blu = document.FormColori.ColoreBlu.value;

var Colori = "rgb(" + Red+ "," + Green + "," + Blu+ ")";
ColoreSfondo = Colori;
console.log(Colori);
document.body.style.background = Colori;

}

**ciro78** · 08-03-2016, 17:54

Originariamente inviata da FilippoDalla

ho modificato in questo modo la parte javascript . il problema è che una volta cliccato il bottone la pagina diventa del colore desiderato per poi subito tornare bianca..

come mai??

function ChangeColor() {

var Red = document.FormColori.ColoreRosso.value;
var Green = document.FormColori.ColoreVerde.value;
var Blu = document.FormColori.ColoreBlu.value;

var Colori = "rgb(" + Red+ "," + Green + "," + Blu+ ")";
ColoreSfondo = Colori;
console.log(Colori);
document.body.style.background = Colori;

}

magari usare il tag code come già ti ho detto?...modifica il messaggio grazie

**FilippoDalla** · 08-03-2016, 19:36

ne ho scritto uno nuovo perché non so come modificare messaggi precedenti (non vedo bottoni che mi permettano di farlo)

-->ho modificato in questo modo la parte javascript . il problema è che una volta cliccato il bottone la pagina diventa del colore desiderato per poi subito tornare bianca..

come mai??

codice:

function ChangeColor() {

var Red = document.FormColori.ColoreRosso.value; 
var Green = document.FormColori.ColoreVerde.value;
var Blu = document.FormColori.ColoreBlu.value;

var Colori = "rgb(" + Red+ "," + Green + "," + Blu+ ")";
ColoreSfondo = Colori;
console.log(Colori);
document.body.style.background = Colori;


}

Discussione: Come cambiare sfondo body con Javascript

Strumenti discussione

Ricerca discussione

Visualizza

Come cambiare sfondo body con Javascript

Tag per questa discussione

Permessi di invio