Editar texto con JS y HTML

sadragoba · #1 (**permalink**) 27/07/2016, 15:45

Hola a todos,

Tengo un ejercicio que resolver y se trata de lo siguiente:

En una página web tengo 2 cuadros de texto, en el primero el usuario introduce el texto que desea, posterior, mediante 4 combo box se debe seleccionar cambiar el formato del texto. Estos 4 combo box son: tipografía, tamaño, negrita o cursiva y efectos. Una vez que el usuario seleccionó el formato del texto, mediante un botón de "aplicar", se debe mostrar en el segundo cuadro de texto el texto con el formato elegido.

El código html lo tengo construido, mi problema es en la lógica de JavaScript para lograr el cambio de formato del texto original y mostrarlo en el segundo cuadro de texto.

¿Alguien me puede dar una idea sobre este tema?

Gracias

#2 (**permalink**) 27/07/2016, 15:48

Ve con algo como esto a modo de ayuda:

Código HTML:

Ver original<html>
    <head>
        <script type="text/javascript">
        function accion(){
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        
        box2.value=box1.value;
        
        var tipo = document.getElementById("tipo").value;
        var size = document.getElementById("size").value;
        var effect = document.getElementById("effect").value;
        
        box2.style.fontFamily=tipo;
        box2.style.fontSize=size+"px";
        
            if(effect == "bold"){
            box2.style.fontStyle="normal";
            box2.style.fontWeight="bold";
            }
            else if(effect == "italic"){
            box2.style.fontWeight="normal";
            box2.style.fontStyle="italic";
            }
            else{
            box2.style.fontWeight="normal";
            box2.style.fontStyle="normal";  
            }
        }
        </script>
    </head>
    <body>
    
        <textarea id="box1"></textarea>
        
        <br/><br/>
        Tipo: <select id="tipo">
            <option value="Arial">Arial</option>
            <option value="Calibri">Calibri</option>
            <option value="Comic Sans MS">Comic</option>
        </select>
        
         Tamaño: <select id="size">
            <option value="12">12</option>
            <option value="18">18</option>
            <option value="24">24</option>
        </select>
        
        <select id="effect">
            <option value="normal">normal</option>
            <option value="italic">cursiva</option>
            <option value="bold">negrita</option>
        </select>
        
         <input type="button" value="GO!!" onclick="accion();" />
        
        <br/><br/>
        
        <textarea id="box2"></textarea>
    
    
    </body>
</html>