Javascript 如何将构造函数值传递到DOM中

我有一张人们填写的表格。单击“提交”后，我希望将数据输入页面

空日志数组，然后是患者构造函数：

// 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;
}

单击“提交”时，将运行此功能：

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();
}

将患者添加到构造函数后，它会尝试渲染到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);
}

function renderPatient（）{
const list=document.querySelector（“患者列表”）；
常量行=document.createElement（“tr”）；
row.innerHTML=`
${Patient.name}
${Patient.date}
${Patient.primsure}
${Patient.secInsurance}
${Patient.estimate}
${Patient.isItCovered}
${Patient.follow}`；
list.appendChild（行）；
}

---

dom中显示的只是所有表行中的“未定义”。

调用

Patient.property

时，您没有访问任何内容。您只需将患者对象传递给

renderPatient

函数addPatientToList（e）{
//抓取元素
const nameValue=document.querySelector（“#name”）.value；
const dateValue=document.querySelector（“日期”）.value；
const PrimInsuranceValue=document.querySelector（“主保险”）.value；
const secinsurance value=document.querySelector（“#secondary insurance”）.value；
const estimateValue=document.querySelector（“#estimate”）.value；
const isItCoveredValue=document.querySelector（“#covered”）.value；
const followUpValue=document.querySelector（“#followup”）.value；
e、 预防默认值（）；
//实例化患者
常数病人=新病人(
名称值，
日期值，
基本价值，
安全价值，
估计价值，
isItCoveredValue，
后续价值
);
推（病人）；
渲染患者（患者）；
clearFields（）；
closeModal（）；
console.log（myLog）；
}
//将患者列入名单
功能呈现患者（患者）{
const list=document.querySelector（“患者列表”）；
常量行=document.createElement（“tr”）；
row.innerHTML=`
${patient.name}
${patient.date}
${patient.primInsurance}
${patient.secInsurance}
${patient.estimate}
${patient.isItCovered}
${patient.follow}`；
list.appendChild（行）；
}

当您调用

Patient.property

时，您没有访问任何内容。您只需将患者对象传递给

renderPatient

函数addPatientToList（e）{
//抓取元素
const nameValue=document.querySelector（“#name”）.value；
const dateValue=document.querySelector（“日期”）.value；
const PrimInsuranceValue=document.querySelector（“主保险”）.value；
const secinsurance value=document.querySelector（“#secondary insurance”）.value；
const estimateValue=document.querySelector（“#estimate”）.value；
const isItCoveredValue=document.querySelector（“#covered”）.value；
const followUpValue=document.querySelector（“#followup”）.value；
e、 预防默认值（）；
//实例化患者
常数病人=新病人(
名称值，
日期值，
基本价值，
安全价值，
估计价值，
isItCoveredValue，
后续价值
);
推（病人）；
渲染患者（患者）；
clearFields（）；
closeModal（）；
console.log（myLog）；
}
//将患者列入名单
功能呈现患者（患者）{
const list=document.querySelector（“患者列表”）；
常量行=document.createElement（“tr”）；
row.innerHTML=`
${patient.name}
${patient.date}
${patient.primInsurance}
${patient.secInsurance}
${patient.estimate}
${patient.isItCovered}
${patient.follow}`；
list.appendChild（行）；
}

问题在于这些属性不是

患者

类的静态属性，它们只能从

患者

实例中获得。您可以通过以下方式访问它们：

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

  console.log(patient.nameValue); // outputs patient name from modal

---

问题是这些属性不是

Patient

类的静态属性，它们只能从

Patient

实例中获得。您可以通过以下方式访问它们：

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

  console.log(patient.nameValue); // outputs patient name from modal

---

您引用的是

患者

“类”，而不是

患者

“实例”，下面是已修复的代码

const submitBtn = document.querySelector("#submit");

// Set patient log to empty array
let myLog = [];
var patient;
// 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;
}

// On click, submit patients to log and clear fields
submitBtn.addEventListener("click", addPatientToList);

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
  patient = new Patient(
    nameValue,
    dateValue,
    primInsurValue,
    secInsurValue,
    estimateValue,
    isItCoveredValue,
    followUpValue
  );

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

// Render patient to list
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);
}

// Close modal
function closeModal() {
  modal.style.display = "none";
}

// Clear fields
function clearFields() {
  nameValue = "";
  dateValue = "";
  primInsurValue = "";
  secInsurValue = "";
  estimateValue = "";
  isItCoveredValue = "";
  followUpValue = "";
}

///// Show / hide modal

// Grab the modal / button
const modal = document.querySelector("#modal");
const addBtn = document.querySelector("#add");
const closeBtn = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
addBtn.addEventListener("click", function () {
  modal.style.display = "block";
});

// When the user clicks on <span> (x), close the modal
closeBtn.addEventListener("click", function () {
  modal.style.display = "none";
});

// Anywhere outside, close modal
window.addEventListener("click", function () {
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

const submitBtn=document.querySelector（“提交”）；
//将患者日志设置为空数组
设myLog=[]；
var患者；
//创建患者构造器
功能病人(
名称
日期，
基本保险，
安全保险，
估计
isItCovered，
后续行动
) {
this.name=名称；
this.date=日期；
this.primInsurance=primInsurance；
this.secInsurance=secInsurance；
这个.估计=估计；
this.isItCovered=isItCovered；
this.followUp=followUp；
}
//单击，将患者提交至日志并清除字段
submitBtn.addEventListener（“单击”，AddPatientList）；
函数addPatientList（e）{
//抓取元素
const nameValue=document.querySelector（“#name”）.value；
const dateValue=document.querySelector（“日期”）.value；
const PrimInsuranceValue=document.querySelector（“主保险”）.value；
const secinsurance value=document.querySelector（“#secondary insurance”）.value；
const estimateValue=document.querySelector（“#estimate”）.value；
const isItCoveredValue=document.querySelector（“#covered”）.value；
const followUpValue=document.querySelector（“#followup”）.value；
e、 预防默认值（）；
//实例化患者
病人=新病人(
名称值，
日期值，
基本价值，
安全价值，
估计价值，
isItCoveredValue，
后续价值
);
推（病人）；
renderPatient（）；
clearFields（）；
closeModal（）；
console.log（myLog）；
}
//将患者列入名单
函数renderPatient（）{
const list=document.querySelector（“患者列表”）；
常量行=document.createElement（“tr”）；
row.innerHTML=`
${patient.name}
${patient.date}
${patient.primsure}
${patient.secInsurance}
${patient.estimate}
${patient.isItCovered}
${patient.follow}`；
list.appendChild（行）；
}
//闭合模态
函数closeModal（）{
modal.style.display=“无”；
}
//净土
函数clearFields（）{
nameValue=“”；
dateValue=“”；
primValue=“”；
secvalue=“”；
艾斯蒂玛