stampare codice html da javascript

**broke31** · 27-11-2014, 18:45

salve ragazzi ho cercato un po' in rete ma non riesco a trovare nulla di comprensibile, ho l'esigenza di stampare del codice html che contiene del codice css all'interno di uno script javascript, non voglio usare document.write perché subito mi incasino con le virgolette,in php mi hanno suggerito una funzione che mi aiuta, ma non riesco a capire se la stessa cosa è possibile anche in javascript grazie mille!

**badaze** · 27-11-2014, 19:17

Puoi fare un esempio ?

**broke31** · 27-11-2014, 19:27

certo mo ti spiego cosa devo fare ti linko il codice e ti spiego dove trovo difficoltà, in pratica devo acquisire da html 3 scelte dell'utente di tipo testuale (devo fargli decidere un colore per le scritte un colore per lo sfondo e un colore per i titoli) e sempre da html una grandezza di base del carattere, poi tramite javascript(lo richiede la traccia) devo far visualizzare del testo formattato secondo i parametri scelti dall'utente(e nella traccia sta scritto usare quindi css all'interno di javascript )
questo è il mio codice:

codice:


<!doctype html>


<html>


    <head>
        
    </head>
    <body>
        <form name="form1">
            <h1> BENVENUTO</h1>
            <br>
                testo: <input type="text" id="testo" value="" name="testo"/>
                <br>
                sfondo: <input type="text" id="sfondo" value="" name="sfondo"/>
                <br>
                titoli: <input type="text" id="titoli" value="" name="titoli"/>
            <br>
                dimensione caratteri di base:
            <select name="grandezza">
                <?php
                    for($i=1;$i<8;$i++){
                            echo "<option value=\"$i\">$i</option>";
                    }
                ?>
            </select>
            <br>
            <input type="button" value="invia dati"/ onclick="formattazione()">
            <script style="text/javascript">
                function formattazione(){
                    var testo=document.getElementById("testo").value;
                    var sfondo=document.getElementById("sfondo").value;
                    var titoli=document.getElementById("titoli").value;
                    //qui non riesco a sistemare 
                    document.write("proviamo a <span style='color:testo'stampare<span> questo testo");
                }
            </script>
        </form>
    </body>
</html>

se guardi alla fine dello script trovi un document.write che dovrebbe stampare una parola nel colore scelto dall'utente ma non funziona correttamente, e visto che mi incasino sempre tra queste mille mila virgolette volevo sapere se esiste un modo più immediato...p.s. se noti erorri nel codice dimmelo che ho comunque qualche difficoltà a finirlo. Mille Grazie

**cavicchiandrea** · 27-11-2014, 20:38

Originariamente inviata da broke31

formattato secondo i parametri scelti dall'utente(e nella traccia sta scritto usare quindi css all'interno di javascript )

forse sbaglio ma secondo me il professore intendeva studia javascript e css

**broke31** · 27-11-2014, 20:45

Questa è la traccia (togli la parte aggiuntiva perché ancora non l'ho fatta)

Scrivere uno script che chieda all'utente tre colori in input: uno per il testo, uno per lo sfondo e uno per i titoli. Lo script deve chiedere all'utente anche la dimensione del carattere di base (da 1 a 7). Creare un documento in cui siano evidenti queste caratteristiche. (Suggerimento, creare con JavaScript delle regole CSS).
#Lo script deve essere in grado di determinare la dimensione e le caratteristiche di H1, H2 ed H3 rispetto alle caratteristiche inserite dall'utente per il carattere di base.H1: 3 volte il testo base ed in grassettoH2: 1 volte il testo baseH3: 1 volta il testo base in grassetto ed in corsivoControllare che il colore dello sfondo, quello del titolo e quello del testo siano diversi. Nel caso due o più colori assegnati dall'utente siano uguali, devono essere presenti delle regole che determinino quale colore devono assumere titolo, testo e sfondo. Nel caso l'utente inserisca al posto dei tre colori il testo "*" deve essere caricato un foglio di stile esterno.

**cavicchiandrea** · 27-11-2014, 20:53

Non so che dirti resto del opinione che sia un compito, e non credo sia corretto che lo faccia il forum, ma che tu studia javascript e css detto questo ti auguro una buona serata

**badaze** · 27-11-2014, 20:54

Siccome non voglio fare i compiti al posto tuo ti allego codice che dovrai... adattare.

codice HTML:

<!doctype html>
 <html>
     <head>
             <script style="text/javascript">
                 function formattazione(){
                     var testo=document.getElementById("testo").value;
                     var sfondo=document.getElementById("sfondo").value;
                     var colore=document.getElementById("colore").value;
           var grandezza=document.getElementById("grandezza").value;
                     //qui non riesco a sistemare 
           spanStyle  = "style='color:"+colore+";background-color:"+sfondo+";font-size:"+grandezza+"pt;'";
           daStampare = "Stampa del testo <span "+spanStyle+">"+testo+"</span>";
                     document.write(daStampare);
                 }
         
                 function formattazione2(){
                     var testo=document.getElementById("testo").value;
                     var sfondo=document.getElementById("sfondo").value;
                     var colore=document.getElementById("colore").value;
           var grandezza=document.getElementById("grandezza").value;
           
           miospan = document.getElementById("myspan");  
           
           miospan.style.color = colore;       
           miospan.style.backgroundColor = sfondo;
           miospan.style.fontSize = grandezza+'pt';    
           miospan.innerHTML = testo;     
                 }         
             </script>   
     </head>
     <body>
         <form name="form1">
             <h1> BENVENUTO</h1>
             <br>
                 testo: <input type="text" id="testo" value="" name="testo"/>
                 <br>
                 sfondo: <input type="text" id="sfondo" value="" name="sfondo"/>
                <br>
                 colore: <input type="text" id="colore" value="" name="colore"/>
             <br>
                 dimensione caratteri di base:
             <select id="grandezza">
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>  
                <option value="14">14</option>                      
             </select>
             <br>
             <input type="button" value="invia dati" onclick="formattazione()">
       <br/>
             <input type="button" value="invia dati2" onclick="formattazione2()">
       <br/>
       <span id="myspan"></span>
         </form>
     </body>
 </html>

**cavicchiandrea** · 27-11-2014, 21:01

Originariamente inviata da badaze

Siccome non voglio fare i compiti al posto tuo ti allego codice che dovrai... adattare.

Hai fatto bene a premetterlo, altrimenti si poteva pensare diversamente.

P.S. finché si ragionerà cosi non avremo mai buoni studenti
P.S.S. il background come è scritto potrebbe non anadare

**broke31** · 27-11-2014, 21:04

io non ho preteso codice, vi ho linkato il mio solamente perché mi è stato chiesto un esempio, e ho solamente chiesto se fosse possibile stampare del codice html misto a css stando dentro uno script javascript senza usare document.write, perché mi stavo scemunendo con tutte quelle virgolette aperte e chiuse non volevo far scatenare nessun caos XD

Discussione: stampare codice html da javascript

Strumenti discussione

Ricerca discussione

Visualizza

stampare codice html da javascript

Permessi di invio