尽管通过 id 调用，Javascript 仍无法访问 jsf outputText(label) 元素

Question

我正在尝试使用 javascript 访问 jsf outputText 值的值，但它抛出未定义的错误。下面是代码

    <ui:composition template="/template.xhtml">
            <ui:define name="head">
                <script type="text/javascript">
                    function sendDetails()
                    {
                        alert("am inside js");
                        var key=document.getElementById('editForm:key').value;
                        alert(key);
                    }
                </script>
            </ui:define>
    <ui:define name="body">
                <f:view>
                    <h:form id="editForm">
                        <h:outputLabel id="key" value="#{editController.details.clientId}" style="font-weight: bold" >
 <h:commandLink id="analytics" onclick="sendDetails()" value="View"></h:commandLink>

     </h:form>
     </f:view>
     </ui:define>
     </ui:composition>

当我单击命令链接时，它抛出未定义！我无法访问输出标签的值。我在 firebug 中检查了查看页面源代码

<label id="editForm:key" style="font-weight: bold">

1e20bb95-753e-4252-b6d6-e109fa07171e

这似乎是正确的..我检查了console.log(document.getElementById('editForm:key')) console.log(document.getElementById('editForm:key').value)其中显示的<label id="editForm:key"> undefined

如何访问 label/jsf 输出文本值。我只需要 javascript 中的解决方案

Answer 1

您无法使用 获取h:outputLabel值.value，因为它被呈现为 HTMLlabel标记，并且您无法使用 获取h:outputText值.value，因为它被呈现为 HTMLspan标记。

代替.innerHTML两个标签。

你可以用 Firebug 找到它的所有属性。添加此观看

document.getElementById('editForm:key')

例如，这里有更多保存其文本的属性

.innerHTML
.outerText
.textContent