Passing parameters to a javascript function called through 'onclick' attribute

I need to create links on webpage which call a javascript function with different parameters on being triggered by onclick event. Thus function needs to be passed a paramter.

In my code as shown below, I am passing a parameter t开发者_如何学Co wr() function when calling from onclick within commandLink. Howver the code doesnt successfully execute if I pass i as parameter to wr() function within onclick, but is successful if I pass a constant ie, wr(4). How can I successfully pass a variable parameter to this javascript function ?

            <h:form>
                <ui:repeat value="#{bean.list}" var="i">
                    <p:commandLink onclick="wr(i)" value="#{i}" /><br/>
                </ui:repeat>
            </h:form>

            <p id="e">fd</p>

            <script type="text/javascript" >
                function wr(i){
                    document.getElementById("e").innerHTML="this is "+i+ " !";
                }
            </script>

Shouldn't your markup for the onclick attribute evaluate the variable 'i' using #{i} instead of just passing 'i'?

So it should be:

<ui:repeat value="#{bean.list}" var="i">
  <p:commandLink onclick="wr(#{i})" value="'#{i}'" /><br/>
</ui:repeat>

Have you used something like FireBug to see what 'i' is evaluting too inside of your JS function?

Edit: Updated the markup above to enclose the #{i} expression in single '' quotes

You should pass the reference of the element using this. It is more flexible than just passing hard parameters.

eg: ...onclick="wr(this)"...

and then

function wr(elm){
  document.getElementById("e").innerHTML="this is "+ elm.value + " !";
}

You should do this:

<ui:repeat value="#{bean.list}" var="i">
   <p:commandLink onclick="wr('#{i}')" /><br/>
</ui:repeat>