Change innerHtml of div according to value of model item in view .NET6 EF6 Razor Pages No MVC
I am trying to have a due date optional in a todo list. Since date fields are not nullable/required, I set the default due date to 09/09/9999. That date represents a todo that does not have a due date. What I want is to have the innerHtml of that due date display “None” if the due date is 09/09/9999.
My code however shows “None” in the due date div in the table of only the first row, regardless of the date.
Here is the javascript code
function hideDueDate () { const dueDateDiv = document.querySelector('#due-date'); if (dueDateDiv.innerHTML = "09/09/9999") { dueDateDiv.innerHTML = "None"; } } hideDueDate();
And here is the view.
<tbody> @*READ*@ @foreach(var obj in Model.ToDo) { <tr> <td width="10%">@Convert.ToString(string.Format("{0:MM/dd/yyyy}", obj.CreateDate))</td> <td width="20%">@obj.Name</td> <td width="40%">@obj.Description</td> <td width="10%"> <div id="due-date">@Convert.ToString(string.Format("{0:MM/dd/yyyy}", obj.DueDate))</div> </td> <td width="20%" class=""> <div class="row d-flex justify-content-center"> <input asp-for="@obj.Complete" class="form-check-input mt-3" type="checkbox" readonly="readonly" /> </div> </td> <td> <div class="w-65 btn-group" role="group"> <a asp-page="View" asp-route-id="@obj.Id" class="btn btn-outline-info rounded-pill mx-2"> <i class="bi bi-binoculars"> View</i> </a> <a asp-page="Edit" asp-route-id="@obj.Id" class="btn btn-outline-success rounded-pill mx-2"> <i class="bi bi-pencil-square"> Edit</i> </a> <a asp-page="Delete" asp-route-id="@obj.Id" class="btn btn-outline-danger rounded-pill mx-2"> <i class="bi bi-trash-fill"> Delete</i> </a> </div> </td> </tr> } </tbody>
Advertisement
Answer
1.document.querySelector('#due-date')
can only get the first matched element. You need use .each()
.
2.The condition should be dueDateDiv.innerHTML == "09/09/9999"
.
Change your code like below:
function hideDueDate () { $('div #due-date').each(function() { if(this.innerHTML=="09/09/9999"){ this.innerHTML= "None"; } }); }