I have a specific goal in mind, but I'm struggling to articulate it concisely. Despite conducting extensive research, none of the suggested solutions seem applicable in my case.
Objective: I aim to change the background color of a div based on the dance style using a JavaScript function. When the page loads, the background color of the dance style should be set accordingly.
My Razor Page iterates through and displays various dance events (other columns are omitted for clarity).
@foreach (var item in Model.Dances)
{
<tr>
<td>
<div> @Html.DisplayFor(modelItem => item.DanceStyle) </div>
</td>
</tr>
}
Due to the dynamic nature of the rows, the div elements do not have unique IDs. Therefore, calling a JavaScript function with the Dance's style parameter and using getElementByID to change the background color of the DIV is not feasible.
Below is an initial attempt at a potential solution:
<div onload="fColorDIV(this.value)"> DanceStyle </div>
function fColorDIV(this)
{
switch(this)
{
case "Waltz":
dancestyleBGcolor = "PapayaWhip"
break;
case "WCS":
dancestyleBGcolor = "LightSalmon"
break;
case "Zydeco/Cajun":
dancestyleBGcolor = "Yellow"
break;
default:
dancestyleBGcolor = "LightGray"
}
return dancestyleBGcolor;
}
I am unsure if the onload event will work correctly when the DIV is being rendered on the page. Additionally, assigning an ID to the element is not viable since all rows would end up having the same ID for their DIVs.