Comunidad de diseño web y desarrollo en internet online

Reemplazar labels por input

Citar            
MensajeEscrito el 01 Jun 2014 12:16 am

    Hola. Tengo un gran problema. Tengo un ejercicio. Tengo una lista de labels dentro y cada vez que oprimo un botón se tienen que cambiar por inputs.

    Para poder Editar. Pero no me sale. He usado replaceChild, removechild, pero hay algo que no sé.

    Tengo que usar traversing y los selectores.



En el HTML

Código HTML :

<body>
       <div class="container">
          <div class="row">
             <div class="col-md-12">
                <h1>Practica 1</h1>
             </div>
          </div>
          <div class="row">
             <div class="col-md-6">
                <ul id="ul">
                   <li><label for="">Escribir algo</label></li>
                   <li><label for="">Escribir algo</label></li>
                   <li><label for="">Escribir algo</label></li>
                   <li><label for="">Escribir algo</label></li>
                </ul>
               <button type="button" id="btnEditar">Editar</button>
             </div>
             
          </div>
       </div>       
       <script src="js/logica.js"></script>
    </body>


En js

Código Javascript :

var editar  = document.querySelector('#btnEditar');

//Onclick 
   editar.onclick = editarWeb;
   
   function editarWeb (){
      var ul = document.getElementById('ul');
      var lis = document.getElementsByTagName('li');
      //create
      var textbox = document.createElement('input');
      for (var i = 0; i < lis.length; ++i) {//todos los label
          
          var labels= lis[0].querySelectorAll('label');
             
         
              
               
          
          console.log(labels);
      }
      console.log(lis);
}


Gracias espero puedan ayudarme :oops: :wink: ^^

Por Rubi90s

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 09 Jun 2014 05:31 pm
Hola, en mi caso yo pondría los inputs junto con los labels, pero con un "display: none" y al hacer click cambiar por "display: block" y darle a los labels "display: none".

Por Sahch

18 de clabLevel



Genero:Masculino  

Programador de Programas

chrome
Citar            
MensajeEscrito el 09 Jun 2014 07:59 pm
por qué no.. en vez de usar label, pones input con el atributo "disabled" o "readonly"

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.