Javascript 即使console.log确认值，if语句也无法识别该值

我正在尝试用HTML制作联系人列表。添加新联系人时，会出现一个菜单，用户可以在其中输入有关联系人的信息。出于某种原因，当我尝试console.log任何字段的值时（因为我需要使用firstnamefield字段来确定联系人是否有效），它表示找不到null的值。因此，我的if语句不起作用，我无法阻止用户进行完全空白的联系

代码如下，欢迎任何帮助

function addContact() { //called by the "add contact button", inserts the fields for the custom
      document.getElementById("description").innerHTML="<h2><input type='text' id='firstnamefield' placeholder='First Name' value=''></h2><h2><input type='text' id='middlenamefield' placeholder='Middle Name'></h2><h2><input type='text' id='lastnamefield' placeholder='Last Name'></h2><input type='text' id='nicknamefield' placeholder='Nickname'><br><br><input type='text' id='phonefield' placeholder='Phone'><br><input type='text' id='emailfield' placeholder='Email'><br><br><input type='text' id='birthdayfield' placeholder='Birthday'><br><button type='button' id='finishbutton' onclick='finalizeContact()'>Finished</button>";
}

function finalizeContact() { //called by the "finished" button on the contact information form that appears when adding a contact, turns the information that has just been input by the user into a contact under the custom section at the bottom of the list
  var firstname=document.getElementById('firstnamefield').value;
  console.log(firstname);
  if(document.getElementById("firstnamefield").value != null || firstname != '') {
    document.getElementById('custom').innerHTML = document.getElementById('custom').innerHTML + "<button type='button' class='customcontact' onclick=\"display('" + document.getElementById('firstnamefield').value + "', '" + document.getElementById('nicknamefield').value + "', '" + document.getElementById('lastnamefield').value + "', '" + document.getElementById('nicknamefield').value + "', '" + document.getElementById('phonefield').value + "', '" + document.getElementById('emailfield').value + "', '" + document.getElementById('birthdayfield').value + "')\">" + document.getElementById('firstnamefield').value + " " + document.getElementById('lastnamefield').value + "</button>";
    display(document.getElementById('firstnamefield').value, document.getElementById('middlenamefield').value, document.getElementById('lastnamefield').value, document.getElementById('nicknamefield').value, document.getElementById('phonefield').value, document.getElementById('emailfield').value, document.getElementById('birthdayfield').value)
    if(document.getElementById('custom').style.display=="none") { // if there hasn't been a custom contact created yet, the CUSTOM section isn't visible. therefore, if the CUSTOM section is hidden, this function will make it visible
      document.getElementById('custom').style.display="block";
    }
  } else {
    document.getElementById("firstnamefield").style.border = "5px solid red";
    document.getElementById("description").innerHTML = "Please enter a name.<br>" + document.getElementById("description").innerHTML;
  }
}

由“添加联系人按钮”调用的函数addContact（）{//插入自定义联系人的字段 document.getElementById（“description”）.innerHTML=“




已完成”； } 函数finalizeContact（）{//由添加联系人时出现的联系人信息窗体上的“finished”按钮调用，将用户刚刚输入的信息转换为列表底部自定义部分下的联系人 var firstname=document.getElementById（'firstnamefield'）。值； console.log（名字）； if（document.getElementById（“firstnamefield”）.value！=null | | firstname！=''）{ document.getElementById（'custom'）。innerHTML=document.getElementById（'custom'）。innerHTML+“”+document.getElementById（'firstnamefield'）。value+“”+document.getElementById（'lastnamefield'）。value+“”； 显示（document.getElementById（'firstnamefield'）。值，document.getElementById（'middlenamefield'）。值，document.getElementById（'lastnamefield'）。值，document.getElementById（'phonefield'）。值，document.getElementById（'emailfield'）。值，document.getElementById（'birthdayfield'）。值） 如果（document.getElementById（'custom'）.style.display==“none”）{//如果尚未创建自定义联系人，则自定义部分不可见。因此，如果自定义部分隐藏，此函数将使其可见 document.getElementById（'custom'）.style.display=“block”； } }否则{ document.getElementById（“firstnamefield”）.style.border=“5px实心红色”； document.getElementById（“description”）.innerHTML=“请输入名称。
”+document.getElementById（“description”）.innerHTML； } }

---

post your html too当您打算使用“AND”而不是console.log，而是调试器并打开您的chrome Dev工具时，您可以使用“OR”来调试多个控制台日志。您可以检查所有值并将js放在chrome将评估的控制台中。您的输入字段仅作为innerHTML添加，而不是作为DOM中的实际元素添加。因为它们不是DOM中的节点，finalizeContact函数无法找到元素并返回null。我建议使用document.createElement将您的输入元素作为节点添加到DOMpost您的html Too当您打算使用“AND”而不是console.log，而是调试器并打开您的chrome Dev工具时，它将帮助您调试一个以上的控制台日志。您可以检查所有值并将js放在chrome将评估的控制台中。您的输入字段仅作为innerHTML添加，而不是作为DOM中的实际元素添加。因为它们不是DOM中的节点，finalizeContact函数无法找到元素并返回null。我建议使用document.createElement将输入元素作为节点添加到DOM中