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>