So i have my Index View in which I have a table which lists me all the data i need, thourgh a foreach loop. Here is part of my Index.cshtml
<table class="table">
@foreach (var item in Model)
{
<tr>
<td style="vertical-align:middle">
<div>
<img src="@("~/image/"+item.Poza)" asp-append-version="true" width="135" height="210" align="left" style="margin-right: 15px" />
</div>
<td style="vertical-align: middle">
<div>
<span style="font-weight:bold">Titlu: </span><span>@Html.DisplayFor(modelItem => item.Titlu)</span>
</div>
<div>
<span style="font-weight:bold">An: </span><span> @Html.DisplayFor(modelItem => item.An)</span>
</div>
<div>
<span style="font-weight:bold">Durata: </span><span> @Html.DisplayFor(modelItem => item.Durata)</span>
</div>
<div>
<span style="font-weight:bold">Nota: </span><span> @Html.DisplayFor(modelItem => item.Nota)</span>
</div>
<div>
<span style="font-weight:bold">Recenzie: </span><span> @Html.DisplayFor(modelItem => item.Descriere)</span>
</div>
</p>
@if (item.UserId != ViewBag.userid)
{<form asp-action="PostLike" asp-route-id="@item.Id">
<input id="btn" type="submit" value="Like" class="btn btn-primary" />
</form>}
</td>
</tr>
}
</table>
Near the end of the page, i have my Like button. I would like to change its color when is pressed, and change it back again at the next click, so the user knows which films he liked and which he didnt. How could i do this? Becuase if I add a simple javascript function like
function color1() {
document.getElementById("btn").style.backgroundColor = "red";
}
it changes only the color of the first button. I mention that everytime the like button is clicked, the page refreshes. So i need that button color to remain unchanged.
How are you storing their likes? Need to check that value on page load.