Javascript 正在从“document.getElementById（）”获取空值

我在review.xhtml页面上有以下确认框：

要设置焦点的输入文本代码位于“documentPreview.xhtml”上：

<p:inputText  style="color:#4d4d4f; width:280px !important; margin-top: -3px;" id="invoiceNumber" value="#{customerReviewLazyDataModel.customerReviewVO.transactionheaderVO.invoiceNumber}" required="true" requiredMessage="#{msgs['com.yob.dpg.customerReview.mandatory.invoiceNumber']}"/>

我的问题是，当我单击确认框的“取消”按钮时，浏览器上会抛出一个异常“document.getElementById为null”

---

有谁能给我这个问题的解决办法吗

因为JSF中的组件id与HTML DOM对象id不同，所以在检查生成的HTML文件中的组件id时可以看到这一点

---

检查此博客文章，尝试将prependId=false属性添加到表单中。这将在JSF生成html时保留其所有子项的ID。

在浏览器中查看呈现的html。输入元素的id可能类似于form1:invoiceNumber，而不是简单的invoiceNumber。这是因为JSF在呈现为html时将所有父NamingContainer id预先添加到组件

为了解决这个问题，您可以像@sergui建议的那样关闭前置id功能，但这可能会产生一些不利影响，即如果复合组件在同一页面上重复使用多次，则会重复id。另一个选项是将clientId存储到JSF在javascript中预先添加的部分

为此，将initString clientId函数添加到js文件中，然后使用JSF facelet中的内联脚本调用它

<h:outputScript>init('#{component.clientId}')</h:outputScript>

---

然后，您必须在invoiceNumber前面加上clientId，但必须先转义JSF使用的分隔符：。

js代码首先执行，所以请将js代码放在html下面。

<p:inputText  style="color:#4d4d4f; width:280px !important; margin-top: -3px;" id="invoiceNumber" value="#{customerReviewLazyDataModel.customerReviewVO.transactionheaderVO.invoiceNumber}" required="true" requiredMessage="#{msgs['com.yob.dpg.customerReview.mandatory.invoiceNumber']}"/>

<h:outputScript>init('#{component.clientId}')</h:outputScript>