Buenas!, antes de nada decir que he buscado y rebuscado y no encuentro respuestas adecuadas. Se se me pasó, lo siento de antemano y agradecería que me indicaran dónde esta la respuesta.
Dicho esto...
Estoy realizando una pagina (html) con un listado de opciones para configurar un producto. Cada opción tienen un checkbox para ser seleccionada.
Al hacer click en un checkbox se debe crear un elemento de lista (li) y al desmarcarlo se debe eliminar dicho elemento.
El caso es que funciona... pero solo una vez??¿?
Como podréis suponer soy nuevo en esto.
El código es este;
Javascript Código PHP:
function incremento(nombre,precio,id) {//función para añadir importes y nombres a la lista
var container = document.getElementById("contenedorpedido");//almacenamos en la variable contaier el div donde insertaremos la lista
if(document.getElementById('ch'+id).checked!=false){
var item=[nombre,precio,id];//almacenamos los valores en un nuevo array
ingredientes.push(item);//insertamos el nuevo array en el array ingredientes
var lastitem=ingredientes.length-1;//almacenamos en la variable "lastitem" el último elemento insertado en el array
var ul=document.createElement("ul");//Creamos el elemento de lista (ul)
ul.id='ul'+id;
var li=document.createElement("li");//creamos el elemento item de lista (li)
li.id='li'+id;
ul.appendChild(li);//definimos el elemento "item" como hijo de "lista"
container.appendChild(ul);//definimos el elemento "ul" como hijo del div contenedor
li.innerHTML = ingredientes[lastitem][0]+' '+ingredientes[lastitem][1]+' Euros';//insertamos el contenido del array con los ingredientes
}else{
var padre = document.getElementById('ul'+id);
padre.removeChild(document.getElementById('li'+id));
}
}
HTML
Código HTML:
<form action="" method="post" id="chpan">
<table id="tablapan" style="margin-left: 15px;" width="700">
<tr>
<td class="pasoheader" colspan="4">Paso 1: Elige tu Pan</td>
</tr>
<tr class="pasoingrediente">
<td>Sólo</td>
<td>Con Sésamo</td>
<td>Semilla de Amapola</td>
<td>Con Cereáles</td>
</tr>
<tr class="pasoingrediente">
<td><img src="images/pansolo.gif" alt="Icono Ingrediente"></td>
<td><img src="images/pansesamo.gif" alt="Icono Ingrediente"></td>
<td><img src="images/panamapola.gif" alt="Icono Ingrediente"></td>
<td><img src="images/pancereales.gif" alt="Icono Ingrediente"></td>
</tr>
<tr class="pasoingrediente">
<td class="pasoingredienteprecio">0,50 €</td>
<td class="pasoingredienteprecio">0,60 €</td>
<td class="pasoingredienteprecio">0,70 €</td>
<td class="pasoingredienteprecio">0,75 €</td>
</tr>
<tr class="pasoingrediente">
<td><input name="panes" type="checkbox" id="chpan1" onclick="incremento('Pan Sólo','0,50','pan1');"></td>
<td><input name="panes" type="checkbox" id="chpan2" onclick="incremento('Pan con Sésamo','0,60','pan2');"></td>
<td><input name="panes" type="checkbox" id="chpan3" onclick="incremento('Pan Semilla de Amapola','0,70','pan3');"></td>
<td><input name="panes" type="checkbox" id="chpan4" onclick="incremento('Pan con Cereales','0,75','pan4');"></td>
</tr>
</table>
</form> Muchas gracias de antemano!