Problema cambiando estilo en un onclick de funcion anonima

GiannO · #1 (**permalink**) 31/10/2010, 10:43

Buenas hace poco comence a estudiar JS y aca vengo a dejar mi primer duda que no puedo resolver asique agradezco cualquier ayuda que me den :)

Tengo unas cajas de comentarios parecidas a las de facebook, que al darle click a un link crea un text area y un input tipo button para enviar el comentario en forma de span y elimina el textarea e input. Mi problema esta en que al darle click a ese link le cambio el visibility a hidden para que no pueda seguir creando textarea e input hasta una vez enviado el comentario pero no puedo lograr que al darle click al input creado vuelva a cambiarse el visibility del link a 'visible' de nuevo. Dejo el codigo JS y el HTML por si alguien puede darme una mano.

Gracias.

Código:

var divs = document.getElementsByTagName('div');
var links = document.getElementsByTagName('a');
for( var i = 0; i < links.length; i++ ){
	links[i].onclick = function(){
		this.style.visibility = 'hidden'
		textarea = document.createElement('textarea');
		var boton = document.createElement('input');
		boton.type = 'button';
		boton.value = 'Comentar';
		this.parentNode.appendChild(textarea);
		this.parentNode.appendChild(boton);
		boton.onclick = function(){	
		var span = document.createElement('span');
		function removerespacios(String){ 
			while(String.substring(0,1) == ' '){ 
				String = String.substring(1, String.length); 
			}
			while(String.substring(String.length-1, String.length) == ' '){ 
				String = String.substring(0,String.length-1); 
			} 
			return String; 
		}	
		span.innerHTML = removerespacios(textarea.value);
		if( span.innerHTML == '' ){ alert('Comentario vacio.'); } 
		else{ this.parentNode.appendChild(span); }
		textarea.parentNode.removeChild(textarea);
		boton.parentNode.removeChild(boton);
                //aca deberia volverse visible links[i]
		}
		
		}
	}

Código HTML:

<html>
	<head>
		<title>Nucleo Facebook I</title>
		<style type="text/css">
		body{ font: normal normal 12px/15px Verdana; color:#009; }
		div{ padding:5px; margin:10px 4px; border: 1px solid #090; width:400px;}
		a{ color:#900; font-size:11px; }
		a:hover{ color:#090; }
		textarea{ border: 1px solid #000; background: #fefefe; display:block; width: 98%; margin: 4px auto;}
		span{ display:block; margin: 5px 0; font-size: 11px; color: #666; padding-top:2px; border-top: 1px dashed #666;}
		input{ border: 1px solid #666; background: #dedede; margin-left:5px; }
		</style>
	</head>
	<body>
		<div>
			<p>Esta es una caja de muestra, si se hace click en el link se debe generar adentro del div un textarea y un input type button</p>
			<a href="#">I like it</a>
			<textarea></textarea>
			<input type="button" value="comentar" />
		</div>
		
		CAJA 2
		<div>
			<p>Esta es otra caja de muestra, cuando le dan comentar, debe aparecer el comentario dejado dentro de un span y desaparecer el textarea y el button</p>
			<a href="#">I like it</a>
			<span>Un comentario</span>
		</div>
		<!-- CAJA 1
		-->
		<div>
			<p>Este es el texto de algo que escribio un amigo tuyo y vas a dejar un comentario si te gusta</p>
			<a href="#">I like it</a>
		</div>
		<div>
			<p>Este es un texto mas de algo que escribio un amigo tuyo y vas a elegir si te gusta o no te gusta</p>
			<a href="#">I like it</a>
		</div>
		<div>
			<p>Este es el ulitmo texto de algo que escribio un amigo tuyo y vas a elegir si te gusta o no te gusta</p>
			<a href="#">I like it</a>
		</div>
		<script type="text/javascript" src="script.js"></script>
	</body>
</html>

IsaBelM · #2 (**permalink**) 31/10/2010, 14:33

lee este articulo y entenderás que es lo que ocurre