Hola, tengo un problema con un carrito de compras en JS (facultad). Al apretar el boton de comprar, la idea es que aparezca un pop up para llenar los datos del comprador. Creo que estoy haciendo bien las funciones pero no me doy cuenta porque no funciona. Desde ya muchas gracias espero alguna respuesa. Matias
window.onload = setearCampos;
function setearCampos(){
var tablaProductos= document.getElementById('tablaProducto');
tablaProductos.innerHTML="";
tablaProductos.innerHTML="<thead><tr><th>Nombre</th><th>Descripción</th><th>Imagen</th><th>Precio</th></tr></thead>";
for (var j=0; j<productos.length; j++) {
switch (j)
{
case 0:{
cargarProductosCategoria(tablaProductos,camisetas) ;
break;
}
case 1:{
cargarProductosCategoria(tablaProductos,pantalones );
break;
}
case 2:{
cargarProductosCategoria(tablaProductos,guantes);
break;
}
case 3:{
cargarProductosCategoria(tablaProductos,botines);
break;
}
}
};
cargarOferta(tablaProductos);
var listaOpciones= document.getElementsByName("categoria");
for (var i=0; i<listaOpciones.length; i++) {
listaOpciones[i].onclick=cargarProductos;
};
listaOpciones[4].checked=true;
eliminarProductosTodos();
resetearCampos();
}
function totalesProductosYMonto(ListaTrTabla){
var cantTotal=0;
var montoTotal=0;
var cantidadProducto;
var montoProducto;
for (var i = 0; i < ListaTrTabla.length; i++) {
var listaTdTabla=ListaTrTabla[i].getElementsByTagName("td");
var numeroPrecio=listaTdTabla[3].childNodes[1];
cantidadProducto = parseFloat(listaTdTabla[2].innerHTML);
cantTotal += cantidadProducto;
montoProducto = parseFloat(numeroPrecio.innerHTML);
montoTotal += montoProducto*cantidadProducto;
}
document.getElementById("totalProductos").innerHTM L=cantTotal;
document.getElementById("totalNumero").innerHTML=m ontoTotal;
}
function cargarFilaCarroCompras(elementoTr,nombre,imagenPro ducto,precioProducto) {
var nombreTd=document.createElement("td");
nombreTd.innerHTML=nombre.innerHTML;
elementoTr.appendChild(nombreTd);
var imagenTd=document.createElement("td");
imagenTd.style.width='110px';
imagenTd.style.height='110px';
imagenTd.innerHTML=imagenProducto.innerHTML;
elementoTr.appendChild(imagenTd);
var cantidadTd=document.createElement("td");
cantidadTd.innerHTML='1';
elementoTr.appendChild(cantidadTd);
var precioTd=document.createElement("td");
precioTd.innerHTML=precioProducto.innerHTML;
elementoTr.appendChild(precioTd);
var botonTd=document.createElement("td");
var botonEliminar=document.createElement("input");
botonEliminar.type="button";
botonEliminar.value="Eliminar";
botonEliminar.name="btnEliminar";
botonEliminar.onclick=eliminarProducto;
botonTd.appendChild(botonEliminar)
elementoTr.appendChild(botonTd);
}
function desactivarBtnCompra(){
var botonOkCompra=document.getElementById("compraOK");
botonOkCompra.onclick=Comprar;
botonOkCompra.disabled=true;
}
function desactivarTodosBtnAgregar(){
var listaBtnAgregar=document.getElementsByName("btnAgr egar");
for (var i=0; i<listaBtnAgregar.length; i++) {
listaBtnAgregar[i].disabled=true;
};
ArmarFormulario();
}
function finalizarCompra(){
if(totalesProductosYMonto() > 0){
Comprar()
}else{
}
}
function Comprar(){
desactivarTodosBtnAgregar();
var listaBtnEliminar=document.getElementsByName("btnEl iminar");
for (var i=0; i<listaBtnEliminar.length; i++) {
listaBtnEliminar[i].disabled=true;
};
}
function ArmarFormulario(){
bg = document.createElement("div");
bg.className = "bg";
formulario = document.createElement('form');
formulario.className = 'form-compra';
nombre = document.createElement('input');
nombre.type = 'text ';
nombre.id = 'nombre';
nombre.value = 'Nombre y Apellido';
nombre.onfocus= select;
nombre.onkeyup = limitarCaracteres;
nombre.maxChar = 30;
telefono = document.createElement('input');
telefono.type = 'text';
telefono.id = 'telefono';
telefono.value = 'telefono';
telefono.onfocus= select;
telefono.onkeyup = limitarCaracteres;
telefono.maxChar = 13;
email = document.createElement('input');
email.type = 'text';
email.id = 'email';
email.value = 'E-mail'
email.onfocus= select;
email.onkeyup = limitarCaracteres;
email.maxChar = 40;
labelDireccion = document.createElement('label');
labelDireccion.innerHTML = 'Direccion de Entrega';
direccion = document.createElement('input');
direccion.type = 'text';
direccion.id = 'direccion';
direccion.onfocus = select;
labelFecha = document.createElement('label');
labelFecha.innerHTML = 'Fecha de Entrega'
fecha = document.createElement('input');
fecha.type = 'text';
fecha.id = 'fecha';
fecha.value = 'dd-mm-aaaa';
fecha.onfocus = select;
fecha.maxChar = 10;
fecha.onkeyup = limitarCaracteres;
labelPago = document.createElement('label');
labelPago.innerHTML = 'Metodo de pago: '
metodoDePago = document.createElement('select');
metodoDePago.name = 'metodoPago';
metodoDePago.onchange = habilitarCuota;
selEfectivo = document.createElement('option');
selEfectivo.innerHTML = 'Efectivo'
selEfectivo.value = 'efectivo';
selCuotas = document.createElement('option');
selCuotas.innerHTML = 'Cuotas'
selCuotas.value = 'cuotas';
metodoDePago.appendChild(selEfectivo);
metodoDePago.appendChild(selCuotas);
labelCuotas = document.createElement('label');
labelCuotas.innerHTML = 'cuotas: '
labelCuotas.className = 'cuotas';
cuotas = document.createElement('select');
cuotas.disabled = true;
opt1 = document.createElement('option');
opt1.value = '1';
opt1.innerHTML = '1';
opt2 = document.createElement('option');
opt2.value = '2';
opt2.innerHTML = '2';
opt3 = document.createElement('option');
opt3.value = '3';
opt3.innerHTML = '3';
cuotas.appendChild(opt1);
cuotas.appendChild(opt2);
cuotas.appendChild(opt3);
formTotal = document.createElement('p');
formTotal.innerHTML = "Total: $ " + totalesProductosYMonto();
formTotal.className = 'price total-form'
btnConfirmar = document.createElement('a');
btnConfirmar.innerHTML = 'Comprar';
btnConfirmar.href = '#';
btnConfirmar.id = 'confirmar';
btnConfirmar.onclick = compraTerminada;
btnCancelar = document.createElement('a');
btnCancelar.innerHTML = 'Cancelar';
btnCancelar.href = '#';
btnCancelar.id = 'cancelar-form';
btnCancelar.className = 'important price';
btnCancelar.onclick = cancelarFormulario;
formulario.appendChild(nombre);
formulario.appendChild(telefono);
formulario.appendChild(email);
formulario.appendChild(labelDireccion);
formulario.appendChild(direccion);
formulario.appendChild(labelFecha);
formulario.appendChild(fecha);
formulario.appendChild(labelPago);
formulario.appendChild(metodoDePago);
formulario.appendChild(labelCuotas);
formulario.appendChild(cuotas);
formulario.appendChild(btnConfirmar);
formulario.appendChild(btnCancelar);
formulario.appendChild(formTotal);
body = document.getElementsByTagName("body");
body[0].appendChild(bg);
body[0].appendChild(formulario);
}
function select(){
if(this.validaSelect != true){
this.value = '';
this.style.color = "black";
}
this.validaSelect = true;
}
function limitarCaracteres(){
contar = this.value.length;
if(contar > this.maxChar){
this.value = this.value.substring(0,this.maxChar);
}
}
function habilitarCuota(){
if(this.value == 'cuotas'){
cuotas.disabled = false;
}else if(this.value == 'efectivo'){
cuotas.disabled = true;
cuotas.value = 1;
}
}
function compraTerminada (){
if(validarFormulario()){
alert('muchas gracias por comprar en Guitar Master');
guardarCompra();
body[0].removeChild(bg);
body[0].removeChild(formulario);
cancelarCompra();
}
}
function validarFormulario(){
if(nombre.value == '' || nombre.value == "Nombre y Apellido"){
alert('por favor ingresa un nombre valido');
return false;
}else if(telefono.value.length <8 || isNaN(telefono.value)){
alert('por favor ingresa un telefono valido');
return false;
}else if(!/.+\@.+\..+/.test(email.value)){
alert('por favor ingresa un email valido');
return false;
}else if(direccion.value == ''){
alert('por favor ingresa una direccion valida');
return false;
}else if(!/([0][1-9]|[1-2][0-9]|[3][0-1])-([0][1-9]|[1][0-2])-([2][0][1-9][0-9])/.test(fecha.value)){
alert('por favor ingresa una fecha valida');
return false;
}else{
return true;
}
}
function guardarCompra(){
var nuevaCompra = new Object();
nuevaCompra.cliente = nombre.value;
nuevaCompra.telefono = telefono.value;
nuevaCompra.email = email.value;
nuevaCompra.direccion = direccion.value;
nuevaCompra.fechaEntrega = fecha.value;
nuevaCompra.metodoPago = metodoDePago.value;
nuevaCompra.cuotas = cuotas.value;
nuevaCompra.resumen = resumenCompra;
nuevaCompra.total = calcularSuma();
compras.push(nuevaCompra);
}
function cancelarCompra(){
activarTodosBtnAgregar();
var listaBtnEliminar=document.getElementsByName("btnEl iminar");
for (var i=0; i<listaBtnEliminar.length; i++) {
listaBtnEliminar[i].disabled=false;
};
var botonBorrar = document.getElementById("quitarTodo");
botonBorrar.disabled=false;
activarBtnCompra();
resetearCampos();
var botonBorrar = document.getElementById("quitarTodo");
botonBorrar.disabled=false;
}
function activarTodosBtnAgregar(){
var listaBtnAgregar=document.getElementsByName("btnAgr egar");
for (var i=0; i<listaBtnAgregar.length; i++) {
listaBtnAgregar[i].disabled=false;
};
}
function activarBtnCompra(){
var botonOkCompra=document.getElementById("compraOK");
botonOkCompra.onclick=Comprar;
botonOkCompra.disabled=false;
}
