carrito de compras

maire · #1 (**permalink**) 23/05/2011, 19:02

estoy aprendiendo Javascript, major dicho ahora aprendo el DOM y utilizando el getElementsBYName o getelementbyId, tengo que hacer esto: tengo una lista de productos, al lado de cada producto tiene que aparecer la cantidad de veces que hice clic en ese producto, no me sale si alguien me ayuda, el ejemplo del formulario que tengo es este:

<body>
<div id="div">
<h1>Carrito</h1>
<div id="centro">
Productos
<div id="productos"></div>
</div>
<input type="button" value="Caramelos" />
<input type="button" value="Harina" />
<input type="button" value="Miel" />
<input type="button" value="Alfajores" />
</div>

InKarC · #2 (**permalink**) 24/05/2011, 03:25

Código Javascript:

Ver originalfunction cuenta(boton){
    var botones = boton.parentNode.getElementsByTagName("button");
 
    for (var i = 0; i < botones.length; i++) {
            if(botones[i] == boton){break;}
    }   
    
    var span = boton.parentNode.getElementsByTagName("span")[i];
    span.innerHTML = Number(span.innerHTML)+1;
    
}

Código HTML:

Ver original<div id="contenedor">
<button onclick="cuenta(this)">Cuenta</button><span>0</span><br />
<button onclick="cuenta(this)">Cuenta</button><span>0</span><br />
<button onclick="cuenta(this)">Cuenta</button><span>0</span><br />
</div>

maire · #3 (**permalink**) 24/05/2011, 05:42

si me podes explicar un poco el codigo....no entiendo lo de var span...

Cita:

Iniciado por InKarC

Código Javascript:

Ver originalfunction cuenta(boton){
    var botones = boton.parentNode.getElementsByTagName("button");
 
    for (var i = 0; i < botones.length; i++) {
            if(botones[i] == boton){break;}
    }   
    
    var span = boton.parentNode.getElementsByTagName("span")[i];
    span.innerHTML = Number(span.innerHTML)+1;
    
}

Código HTML:

Ver original<div id="contenedor">
<button onclick="cuenta(this)">Cuenta</button><span>0</span><br />
<button onclick="cuenta(this)">Cuenta</button><span>0</span><br />
<button onclick="cuenta(this)">Cuenta</button><span>0</span><br />
</div>

InKarC · #4 (**permalink**) 28/05/2011, 12:51

Cita:

function cuenta(boton){

Una funcion que recibe un parametro: el boton clickeado

Cita:

var botones = boton.parentNode.getElementsByTagName("button");

Seleccionamos todos los botones

Cita:

for (var i = 0; i < botones.length; i++) {
if(botones[i] == boton){break;}
}

Hacemos un 'recorrido' para saber la posicion del boton (en el ejemplo seria un numero del 0 al 2) y guardamos la posicion en la variable i (var i)

Cita:

var span = boton.parentNode.getElementsByTagName("span")[i];

Como sabemos que hay igual cantidad de INPUTS que de SPANS simplemente seleccionamos el SPAN que esta en la misma posicion.

Cojemos el contenido de ese span y le sumamos uno.

Cita:

span.innerHTML = Number(span.innerHTML)+1;