“无法读取null的属性'值'错误

Question

我收到此错误“无法读取null的属性'值'并且不确定我的代码有什么问题？我的弹出窗口中有一些输入，用户可以编辑它们，我想保存编辑。

view.popup.on("trigger-action", function(event) {
if (event.action.id === "edit") {

setupEditing(searchResults[arraypos]);
console.log(this);
}
if (event.action.id === "update") {

editFeature.attributes["common_name"] = document.getElementById('commonName').value;
editFeature.attributes["scientificname"] = document.getElementById('sientificName').value;
editFeature.attributes["family"] = document.getElementById('family').value;

var edits = {
updateFeatures: [editFeature]
};
console.log(editFeature.attributes);
tree.applyEdits({updates:[edits]}).then(response => console.log(response));
}
});
}

以下是我看似正确的ID：

function setupEditing(sr) {
     esripopupcontent = document.getElementsByClassName('esri-popup__content')[0];
   esripopupcontent.innerHTML = "<table><tr><td>Common Name</td><td><input value=" + commonname + " id= commonName/></td></tr><tr><td>Scientific Name</td><td><input value=" + scientificname + " id= sientificName /></td></tr><tr><td>family</td><td><input value="+ family + " id= family/></td></tr></table>";