Ver Mensaje Individual
  #2 (permalink)  
Antiguo 02/01/2015, 23:32
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 6 meses
Puntos: 977
Respuesta: Agregar y quitar contenido (texto) de un LABEL/DIV en otro con botón

No debes de utilizar el mismo id en más de un elemento dentro del documento ya que se trata de un valor único e irrepetible. En su lugar, usa clases, además, como una manera de facilitarte las cosas, te sugiero colocar cada grupo de etiqueta + input + button en elementos <div>, de esta manera, para evitar conflictos con los demás elementos, tomarías solo a los elementos del <div> que contiene al botón que acaba de ser pulsado y no a los otros.

Esto podría serte de ayuda:

Código HTML:
Ver original
  1. <div>
  2.     <label class="producto">Producto 1 (cod.001): </label>
  3.     <input type="number" class="cant" onchange="cambia(this)" />
  4.     <input type="button" value="Agregar" onclick="agregar(this)" disabled />
  5. </div>
  6.        
  7. <div>
  8.     <label class="producto">Producto 2 (cod.002): </label>
  9.     <input type="number" class="cant" onchange="cambia(this)" />
  10.     <input type="button" value="Agregar" onclick="agregar(this)" disabled />
  11. </div>
  12.  
  13. <div>
  14.     <label class="producto">Producto 3 (cod.003): </label>
  15.     <input type="number" class="cant" onchange="cambia(this)" />
  16.     <input type="button" value="Agregar" onclick="agregar(this)" disabled />
  17. </div>
  18.  
  19. <textarea id="caja" readOnly></textarea>

Código Javascript:
Ver original
  1. var objeto = {};
  2.  
  3. function agregar(boton) {
  4.     var padre = boton.parentNode,
  5.         producto = padre.querySelector(".producto").innerText,
  6.         caja = document.querySelector("#caja"),
  7.         cantidad = padre.querySelector(".cant").value,
  8.         numero = producto.match(/\s\d\s/g);
  9.    
  10.     if (numero in objeto){
  11.         delete objeto[numero];
  12.         boton.value = "Agregar";
  13.     }
  14.     else{
  15.         objeto[numero] = producto + cantidad;
  16.         boton.value = "Eliminar";
  17.     }
  18.    
  19.     caja.value = null;
  20.    
  21.     for (var prop in objeto){
  22.         caja.value += objeto[prop] + "\n";
  23.     }
  24. }
  25.  
  26. function cambia(number){
  27.     var boton = number.parentNode.querySelector("[type=button]");
  28.  
  29.     //Solo habilito al botón cuando el elemento de tipo 'number' contenga algún valor
  30.     if (number.value.length){
  31.         boton.disabled = false;
  32.     }
  33.     else{
  34.         boton.disabled = true;
  35.     }
  36. }

Ahora, la explicación. Agrupé a los bloques de label + number + button en elementos <div> para así poder acceder al elemento padre del botón que se pulsará y tomar los valores de los otros dos elementos contenidos (label y number), evitando el conflicto con los otros elementos del mismo tipo. Deshabilité a los botones para evitar que se añadan valores al <textarea> antes de que se haya elegido un valor en los elementos de tipo 'number'. A los elementos de tipo 'number', los vinculé con el evento change para que cuando se elija un valor en ellos, se habilite el botón correspondiente, lo cual ocurrirá al invocar a la función 'cambia'.

Fuera del código de las funciones, declaro a un objeto literal, en el cual iré añadiendo/eliminado los valores que correspondan al botón pulsado.

En la función 'agregar', recibo al botón pulsado como parámetro y declaro variables en las cuales asignaré al elemento que contiene al botón pulsado, al texto del elemento de clase 'producto' contenido en el elemento padre que se tomó en la línea anterior, el área de texto, la cantidad del elemento de tipo 'number' y el número de producto que se encuentra en medio del texto de la etiqueta contenida en el elemento padre.

Si dicho número es una propiedad del objeto declarado al inicio, se la elimina y se le asigna al botón el texto 'Agregar', caso contrario, se añade al objeto el valor del producto concatenado con la cantidad y se vincula esta unión con el número de producto, además, cambio el valor del botón a 'Eliminar'.

Finalmente, limpio al área de texto e itero al objeto para ir añadiendo sus valores al área de texto.

DEMO

Te recomiendo utilizar hojas de estilos (CSS) en lugar de añadir los estilos en cada elemento mediante el atributo style. Es lo que se estila —y recomienda— hacer ahora.

Si crees que le hace falta alguna mejora, creo que con esto ya tienes una buena base para hacer las mejoras que creas conveniente.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand