Problem with my accumulator in my Javascript code

Question

Problem with my accumulator in my Javascript code

Navigation

#1 by (2 votes)

0

I have a problem with a mini shopping cart that I want to put together. Create an array with the products and their details. Each product has a button that when you press it, it adds it to the shopping cart. In the shopping cart I only have to show the quantity of products that I have bought and the total sum to be paid. The problem is that I do not know how to add the prices as I press the Add button in the different products.

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <link rel="shortcut icon" href="res/favicon.ico" />
    <link rel="stylesheet" href="res/estilos.css" />
  </head>
  <body>
    <header>
      <h1>Mi carrito </h1>
    </header>
    <main>
      <section>
        <h2>Productos</h2>
        <div id="productos">
        </div>
      </section>
    </main>
    <script src="parcial_3.js"></script>
  </body>
</html>

var d = document;
var c = console.log;

var productos = d.getElementById("productos");

c(productos);
var prod = [
    {
        Nombre: "Velador Americano",
        Precio: 300,
        Imagen: "items/velador_1.jpg",
        Descripción: "Velador estilo Americano"

    },
    {
        Nombre: "Velador Circular",
        Precio: 350,
        Imagen: "items/velador_2.jpg",
        Descripción: "Velador estilo Circular"

    },
    {
        Nombre: "Velador de Cobre",
        Precio: 250,
        Imagen: "items/velador_3.jpg",
        Descripción: "Velador estilo de Cobre"

    },
    {
        Nombre: "Velador de Cristal",
        Precio: 400,
        Imagen: "items/velador_4.jpg",
        Descripción: "Velador estilo Cristal"

    }

]
c(prod, prod[0].Precio);
var contador = 0;
var acumulador = 0;
c(contador);
for (var i = 0; i < prod.length; i++) {
    var div = d.createElement("div");
    productos.appendChild(div);
    var img = d.createElement("img");
    div.appendChild(img);
    img.src = prod[i].Imagen;
    img.alt = prod[i].Nombre;
    var div2 = d.createElement("div");
    var h3 = d.createElement("h3")
    h3.innerHTML = prod[i].Nombre;
    div.appendChild(div2);
    div2.appendChild(h3);
    c(div2);
    var p = d.createElement("p");
    var span = d.createElement("span");
    p.innerHTML = "Precio: ";
    div2.appendChild(p);
    span.innerHTML = "$ " + prod[i].Precio;
    var prec = prod[i].Precio;
    c(prec);
    p.appendChild(span);
    var button = d.createElement("button");
    button.innerHTML = "Agregar";
    div2.appendChild(button);
    button.onclick = Boton
}
function Boton() {

    contador++;
   
        
    p3.innerHTML = "Total a pagar $ " + acumulador;
    p2.innerHTML = "Items agregados " + " " + contador;
    c(contador);
}

c(contador);
var header = d.querySelector("header");
var div3 = d.createElement("div");
header.appendChild(div3);
var p2 = d.createElement("p");
div3.appendChild(p2);
p2.innerHTML = "Items agregados 0 ";
var p3 = d.createElement("p");
div3.appendChild(p3);
p3.innerHTML = "Total a pagar $0";
var but2 = d.createElement("button")
but2.innerHTML = "Agregar";
div3.appendChild(but2);

javascript dom

asked by Ekhoes 29.11.2018 в 19:34

source

1 answer

JAX-RS Overwrite method with same path Visual Studio - Entity Framework

score 2 · Accepted Answer

What you can do is associate each button with the index of the array of products, so when you click on it you can easily get the price.

When you create the button:

var button = d.createElement("button");
button.innerHTML = "Agregar";
button.dataset.indice = i; // aquí le agregas el dato

dataset is a property that allows you to read and write custom attributes.

p>

And what you would have to modify in the click event:

function Boton(evento) {
    var button = evento.target;
    var indice = button.dataset.indice;
    acumulador += prod[indice].Precio;

    // ...
}

The function has a parameter that is sent to you by the browser, in this object there is information about what the activated button was. So you extract the index of the product. The complete example:

var prod = [
    {
        Nombre: "Velador Americano",
        Precio: 300,
        Imagen: "items/velador_1.jpg",
        Descripción: "Velador estilo Americano"
    },
    {
        Nombre: "Velador Circular",
        Precio: 350,
        Imagen: "items/velador_2.jpg",
        Descripción: "Velador estilo Circular"
    },
    {
        Nombre: "Velador de Cobre",
        Precio: 250,
        Imagen: "items/velador_3.jpg",
        Descripción: "Velador estilo de Cobre"
    },
    {
        Nombre: "Velador de Cristal",
        Precio: 400,
        Imagen: "items/velador_4.jpg",
        Descripción: "Velador estilo Cristal"
    }
];

var d = document;
var c = console.log;

var productos = d.getElementById("productos");

var contador = 0;
var acumulador = 0;

for (var i = 0; i < prod.length; i++) {
    var div = d.createElement("div");
    productos.appendChild(div);
    var img = d.createElement("img");
    div.appendChild(img);
    img.src = prod[i].Imagen;
    img.alt = prod[i].Nombre;
    var div2 = d.createElement("div");
    var h3 = d.createElement("h3")
    h3.innerHTML = prod[i].Nombre;
    div.appendChild(div2);
    div2.appendChild(h3);
    var p = d.createElement("p");
    var span = d.createElement("span");
    p.innerHTML = "Precio: ";
    div2.appendChild(p);
    span.innerHTML = "$ " + prod[i].Precio;
    var prec = prod[i].Precio;
    p.appendChild(span);
    var button = d.createElement("button");
    button.innerHTML = "Agregar";
    button.dataset.indice = i;
    div2.appendChild(button);
    button.onclick = Boton
}

function Boton(evento) {
    var button = evento.target;
    var indice = button.dataset.indice;
    acumulador += prod[indice].Precio;

    contador++;
    p3.innerHTML = "Total a pagar $ " + acumulador;
    p2.innerHTML = "Items agregados " + " " + contador;
}

var header = d.querySelector("header");
var div3 = d.createElement("div");
header.appendChild(div3);
var p2 = d.createElement("p");
div3.appendChild(p2);
p2.innerHTML = "Items agregados 0 ";
var p3 = d.createElement("p");
div3.appendChild(p3);
p3.innerHTML = "Total a pagar $0";

<header>
  <h1>Mi carrito </h1>
</header>
<main>
  <section>
    <h2>Productos</h2>
    <div id="productos"></div>
  </section>
</main>