I am working on a small system to track sales. The goal is to have the ability to click on a specific item, and both the total value (items sold) and revenue increase accordingly.
Currently, I have a button with a JavaScript function called incrementValueAndRevenue() which is functioning correctly. However, I am only able to make it work by declaring JSON within the function itself. I would ideally like it to dynamically calculate the total price for each item in my local JSON file based on how many of that specific item has been clicked.
It's worth mentioning that this is being done using Razor Pages.
Below is a snippet of my JSON data:
[
{
"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
}
]
Here is the relevant HTML code:
<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="deductValueAndRevenue()" value="-" />
<input type="button" onclick="incrementValueAndRevenue();" value="+" />
</form>
</li>
}
</ul>
</div>
Lastly, here is the JavaScript function being used:
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;
}
I am looking for a way for the myJSON variable in the function to fetch the actual price from the corresponding item in the JSON file.