Tengo un pequeño sistema que necesita realizar un seguimiento de las ventas. El punto es poder hacer clic en un artículo específico y el valor total (es decir, artículos vendidos) y los ingresos totales aumentan en consecuencia.

Tengo un botón con una función JS llamada incrementValueAndRevenue() que funciona como se supone que debe hacerlo. Pero solo puedo hacer que funcione declarando Json dentro de la función en sí, pero me gustaría hacerlo de modo que para cada elemento en mi archivo Json local, el precio total difiera según la cantidad de elementos específicos en los que se ha hecho clic.

Esto se hace en Razor Pages por cierto.

Aquí está mi Json:

 [ { "Id": 1, "Image": "exorcist.jpg", "Name": "EXORCIST", "Price": 20.00 }, { "Id": 2, "Image": "hoodie.jpg", "Name": "LOGO HOODIE", "Price": 30.00 }, { "Id": 3, "Image": "dadhat.jpg", "Name": "DAD HAT", "Price": 25.00 } ]

Aquí está mi HTML

 <div class="merch-container"> <ul class="merch-ul"> @foreach (var item in Model.Items) { <li class="merch-display"> <img src="~/imgs/@item.Image" style="width: 250px; height: 250px; padding: 15px; object-fit: cover;" /> <p id="item-price">@item.Price</p> <form> <input type="button" onclick="decuctValueAndRevenue()" value="-" /> <input type="button" onclick="incrementValueAndRevenue();" value="+" /> </form> </li> } </ul> </div>

Y aquí está mi función de JavaScript

 function incrementValueAndRevenue() { var value = document.getElementById("items-sold").value; value++; document.getElementById("items-sold").value = value; var myJSON = { price: 35 }; var revenue = myJSON.price * value; document.getElementById("total-revenue").value = revenue; }

En la función es donde me gustaría que la variable myJSON supiera cuál es el precio del archivo Json real.