Hola gente, estoy haciendo un editor WYSIWYG muy sencillo (al margen del posible nuevo desafío) que me está dando problemas. La cuestión es que yo pongo un textarea para el texto y varios select para el tamaño o el color, y un checkbox para ver la vista previa o no; pero ni se ve la vista previa ni se ve el texto al final. Posteo el código para ver si localizan el error porque la consola de errores cada vez me dice una cosa diferente. Gracias de antemano.
Código Javascript
:
Ver original<script type="text/javascript">
var color = document.getElementById('color');
var colorAct = color.options[color.selectedIndex].value;
var fondo = document.getElementById('fondo');
var fondoAct = fondo.options[fondo.selectedIndex].value;
var tamano = document.getElementById('tamano');
var tamanoAct = tamano.options[tamano.selectedIndex].value;
var texto = document.getElementById('texto').value;
var final = document.getElementById('textoFinal');
var vistaPrevia = document.getElementById('vistaPrevia');
var previo = document.getElementById('previa');
function edit(){
final.innerHTML = '<span style="color:' + color + '; background-color:' + fondo + '; font-size:' + tamano +';">' + texto + '</span>';
}
function previa(){
vistaPrevia.innerHTML = '<span style="color:' + color + '; background-color:' + fondo + '; font-size:' + tamano +';">' + texto + '</span>';
if(previo.checked==true){
vistaPrevia.style.display = 'block';
}else{
vistaPrevia.style.display = 'none';
}
}
</script>
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <form id='miForm' action='' method='post'> <select id='color' onchange="previa();"> <select id='fondo' onchange="previa();"> <select id='tamano' onchange="previa();"> <input type="checkbox" id='previa' onclick='previa();' />Vista previa
<textarea id='texto' cols='20' rows='10' onkeyup="previa();" onkeydown="previa();"></textarea> <div id='vistaPrevia' style='display:none;'></div> <input type="button" value="Obtener texto" onclick='edit();' />
Saludos (: