getElementById().value Returns 未定义

Question

我试图将对我页面上大量输入的引用存储在 javascript 变量中，以传递到我后端的网络方法。因为当页面加载某些输入值时，我的页面仅拉出并用数据填充两个隐藏表单之一 'undefined'。这会引发一个错误，导致我的 web 方法更新一个从未被调用的数据库。

我的一个 javascript 调用示例如下：

const fields = {
                    name: '<%=eventFormName.ClientID%>',
                    type: '<%=eventFormType.ClientID%>',
                    subjectLineSD: '<%=eventFormSubjectLineSD.ClientID%>',
                    summarySD: '<%=eventFormSummarySD.ClientID%>',
                    resourcesAffectedSD: '<%=eventFormResourcesAffectedSD.ClientID%>',
                    peopleAffectedSD: '<%=eventFormPeopleAffectedSD.ClientID%>',
                    workAroundSD: '<%=eventFormWorkAroundSD.ClientID%>',
                    startTimeSD: '<%=eventFormStartTimeSD.ClientID%>',
                    endTimeSD: '<%=eventFormEstimatedTimeOfResolutionSD.ClientID%>',
                    subjectLinePO: '<%=eventFormSubjectLinePO.ClientID%>',
                    summaryPO: '<%=eventFormSummaryPO.ClientID%>',
                    resourcesAffectedPO: '<%=eventFormResourcesBeingChangedPO.ClientID%>',
                    changeBenefitsPO: '<%=eventFormChangeBenefitsPO.ClientID%>',
                    impactOnEndUsersPO: '<%=eventFormImpactOnEndUsersPO.ClientID%>',
                    startTimePO: '<%=eventFormProposedStartDatePO.ClientID%>',
                    endTimePO: '<%=eventFormProposedEndDatePO.ClientID%>',
                }

                const values = Object.keys(fields).map((key) => {
                    const elm = document.getElementById(fields[key])
                    if (elm) {
                        return elm.value;
                    }
                    return null;
                })

                PageMethods.updateData.apply(this, values);

换句话说，我如何允许其中一些变量具有值 'undefined' 或 'null' 然后通过我的 PageMethods 调用传递到我的后端？

另外，这是我在后端的webmethod，供参考：

[WebMethod]
    public static string updateData(string[] values)
    {
        try
        {
            SqlCommand command;
            SqlConnection sqlConn = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString);
            command = new SqlCommand("updateNetEvent", sqlConn);

            if (values[1] == "Planned Outage")
            {
                // NetEvent Parameters
                command.Parameters.AddWithValue("@Name", values[0]);
                command.Parameters.AddWithValue("@Type", values[1]);
                command.Parameters.AddWithValue("@SubjectLine", values[9]);
                command.Parameters.AddWithValue("@StartTime", values[14]);
                command.Parameters.AddWithValue("@EndTime", values[15]);

                // UserAction Parameters
                command.Parameters.AddWithValue("@Summary", values[10]);
                command.Parameters.AddWithValue("@ResourcesAffected", values[11]);
                command.Parameters.AddWithValue("@ChangeBenefits", values[12]);
                command.Parameters.AddWithValue("@PeopleAffected", System.Data.SqlTypes.SqlString.Null);
                command.Parameters.AddWithValue("@ImpactOnEndUsers", values[13]);
                command.Parameters.AddWithValue("@WorkAround", System.Data.SqlTypes.SqlString.Null);
                command.Parameters.AddWithValue("@Status", "A");
                command.Parameters.AddWithValue("@PerformedBy", "placeholder"); // TODO: Update
                command.Parameters.AddWithValue("@PerformedOn", DateTime.Now.ToString());
            }
            else if (values[1] == "Service Disruption")
            {
                // NetEvent Parameters
                command.Parameters.AddWithValue("@Name", values[0]);
                command.Parameters.AddWithValue("@Type", values[1]);
                command.Parameters.AddWithValue("@SubjectLine", values[2]);
                command.Parameters.AddWithValue("@StartTime", values[7]);
                command.Parameters.AddWithValue("@EndTime", values[8]);

                // UserAction Parameters
                command.Parameters.AddWithValue("@Summary", values[3]);
                command.Parameters.AddWithValue("@ResourcesAffected", values[4]);
                command.Parameters.AddWithValue("@ChangeBenefits", System.Data.SqlTypes.SqlString.Null);
                command.Parameters.AddWithValue("@PeopleAffected", values[5]);
                command.Parameters.AddWithValue("@ImpactOnEndUsers", System.Data.SqlTypes.SqlString.Null);
                command.Parameters.AddWithValue("@WorkAround", values[6]);
                command.Parameters.AddWithValue("@Status", "A");
                command.Parameters.AddWithValue("@PerformedBy", "placeholder"); // TODO: Update
                command.Parameters.AddWithValue("@PerformedOn", DateTime.Now.ToString());
            }

            command.CommandType = System.Data.CommandType.StoredProcedure;
            sqlConn.Open();
            command.ExecuteNonQuery();
            sqlConn.Close();
            return "./StartPage.aspx";
        }
        catch (Exception ex)
        {
            Console.WriteLine("ERROR: " + ex.ToString());     // Add a log helper to display errors here
            return "Error in updateData WebMethod";
        }

    }

Answer 1

您正在尝试获取不存在的元素，这就是您被抛出的原因。在调用 .value 之前，您需要检查一下。

var name = null
var nameElement = document.getElementById('<%=eventFormName.ClientID%>');
if (nameElement) {
  name = nameElement.value
}

编辑：

因为你的代码会很乱，这让我有点困扰。你可以在下面做这样的事情来让事情变得更有活力。用您的 asp 标签替换每个属性的值，并将您对 PageMethods.updateData 的调用方式更新为 PageMethods.updateData.apply(this, values)

const fields = {
  name: 'name',
  type: 'type',
  subjectLineSD: '<%=eventFormSubjectLineSD.ClientID%>',
  summarySD: '',
  resourcesAffectedSD: '',
  peopleAffectedSD: '',
  workAroundSD: '',
  startTimeSD: '',
  endTimeSD: '',
  subjectLinePO: '',
  summaryPO: '',
  resourcesAffectedPO: '',
  changeBenefitsPO: '',
  impactOnEndUsersPO: '',
  starTimePO: '',
  endTimePO: '',
  endTimePO: ''
}

const updateData = function(name, type) {
  console.log(name)
  console.log(type)
}

const values = Object.keys(fields).map((key) => {
  const elm = document.getElementById(fields[key])
  if (elm) {
    return elm.value
  }
  return null
})

updateData.apply(this, values)

<input id="name" value="NAME">
<input id="type" value="TYPE">

Answer 2

您的错误是由于试图获取页面上不存在的元素的值造成的。

如果您调用 var name = document.getElementById('foo') 但没有包含 id='foo' 的元素，则变量 'name' 为空。因此错误 Cannot read property 'value' of null

如果您设置变量首先检查元素是否存在，这应该可以解决您的问题，例如

var name = document.getElementById('foo') ? document.getElementById('foo').value : null;

getElementById().value Returns 未定义

getElementById().value Returns Undefined

javascript

asp.net

undefined

getelementbyid