This is my code for a HTML webpage with a form In the code i am trying to include a piece of text on the caption of the table that provides a counter of the number of data rows in the table Whenever a new row is added, this number should be incremented Whenever a row is deleted, this number should be decremented However the counter is currently not working The counter always stays on 0 Gym Membership Sign Up table, th, td border 1px solid black table tr nth child(even) background color lightgray Keep track of the number of rows in the table var numRows 0 When Register button is clicked function register() Get form field values var name document getElementById( name ) value var age document getElementById( age ) value var feet document getElementById( feet ) value var inches document getElementById( inches ) value var startDate document getElementById( date ) value if ( validateAge(age) validateDate(startDate)) return Get table reference var table document getElementById( table ) Create new row var row table insertRow() Add cells to row var nameCell row insertCell() var ageCell row insertCell() var heightCell row insertCell() var startDateCell row insertCell() var deleteCell row insertCell() Add values to cells nameCell innerHTML name ageCell innerHTML age heightCell innerHTML feet ft inches in startDateCell innerHTML startDate deleteCell innerHTML ' Delete ' Update the number of rows in the table numRows document getElementById( caption ) innerHTML Total Registrations numRows function validateAge(age) if (age 18 age 70) alert( Please enter an age between 18 and 70 ) return false return true function validateDate(startDate) var inputDate new Date(startDate) var currentYear new Date() getFullYear() if ( inputDate getFullYear() currentYear inputDate getTime() new Date() getTime() ) alert( Please enter a valid start date in 2023 ) return false return true Reset form resetForm() alert( Registration Successful ) When Reset Information button is clicked function resetForm() document getElementById( name ) value document getElementById( age ) value document getElementById( feet ) value 4 document getElementById( inches ) value 0 document getElementById( date ) value When Delete button is clicked function deleteRow(deleteButton) Get the parent row of the delete button var row deleteButton parentNode parentNode Get the parent table of the row var table row parentNode Remove the row from the table table removeChild(row) Update the number of rows in the table numRows document getElementById( caption ) innerHTML Total Registrations numRows Gym Membership Sign Up Please complete the form below Full Name Age Height 4 5 6 ft 0 1 2 3 4 5 6 7 8 9 10 11 in Start Date Register Reset Information Registrants Total Registrants 0 Name Age Height Start Date

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 24, 2024

This is my code for a HTML webpage with a form. In the code i am trying to include a piece of text on the

This is my code for a HTML webpage with a form. In the code i am trying to include a piece of text on the caption of the table that provides a counter of the number of data rows in the table. Whenever a new row is added, this number should be incremented. Whenever a row is deleted, this number should be decremented. However the counter is currently not working. The counter always stays on 0.

Gym Membership Sign Up

Please complete the form below: