[Link to codepen](https://codepen.io/jdfill/pen/MWyNxje).

I have a form that people fill out. On clicking submit I want the data to be entered onto the page.

The empty log array and then Patient constructor:

```
// Set patient log to empty array
let myLog = [];

// Create patient constructor
function Patient(
  name,
  date,
  primInsurance,
  secInsurance,
  estimate,
  isItCovered,
  followUp
) {
  this.name = name;
  this.date = date;
  this.primInsurance = primInsurance;
  this.secInsurance = secInsurance;
  this.estimate = estimate;
  this.isItCovered = isItCovered;
  this.followUp = followUp;
}

```

When you click submit, it runs this function:

```
function addPatientToList(e) {
  // Grab elements
  const nameValue = document.querySelector("#name").value;
  const dateValue = document.querySelector("#date").value;
  const primInsurValue = document.querySelector("#primary-insurance").value;
  const secInsurValue = document.querySelector("#secondary-insurance").value;
  const estimateValue = document.querySelector("#estimate").value;
  const isItCoveredValue = document.querySelector("#covered").value;
  const followUpValue = document.querySelector("#follow-up").value;
  e.preventDefault();

  // Instantiate patient
  const patient = new Patient(
    nameValue,
    dateValue,
    primInsurValue,
    secInsurValue,
    estimateValue,
    isItCoveredValue,
    followUpValue
  );

  myLog.push(patient);
  renderPatient();
  clearFields();
  closeModal();
}

```

After adding the patient to the constructor, it attempts to render to the dom:

```
function renderPatient() {
  const list = document.querySelector("#patient-list");
  const row = document.createElement("tr");

  row.innerHTML = `
  <td>${Patient.name}</td>
  <td>${Patient.date}</td>
  <td>${Patient.primInsur}</td>
  <td>${Patient.secInsurance}</td>
  <td>${Patient.estimate}</td>
  <td>${Patient.isItCovered}</td>
  <td>${Patient.followUp}</td>`;

  list.appendChild(row);
}

```

What shows up in the dom is just 'undefined' across all table rows.