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>
