Hello,

I am trying to write a VF Component, in which it has two arrows up-Down to increase and decrease some values.

But in VF Page these two arrows are not clickable.

Could you pls help, where is the fault.

Here is VF Component-

<apex:component >

<!--Attribute Definition-->


<apex:attribute name="myvalue" description="Default value for the component." type="Integer" required="true"/> 
<apex:attribute name="max" description="Maximum Value" type="Integer" required="true"/> 
<apex:attribute name="min" description="Minimum value" type="Integer" required="true"/>

<!--java script description-->

<script>
function increment(valueId)
{
   if(document.getElementById(valueId).value<{!max})
   {
    documnet.getElementById(valueId).value++;
    
   }
   else
   {
     alert("You can not increase the number above" +{!max});
   
   }
   
 }
 
 function decrement(valueId)
 {
   if(document.getElementById(valueId).value>{!min})
   {
      documnet.getElementById(valueId).value--;
   
   }
   
   else
   {
     alert("You can not decrease number below"  +{!min});
   
   }
    
 }

</script>

<!-- Custom Componet definition -->
<table cellspacing='0' cellpadding='0'>
<tr>
<td rowspan="2">
<apex:inputText value="{!myvalue}" size="4" id="theValue"/>
</td>
<td>
<div onclick="increment('{!$Component.theValue}');">&#9650;
</div>
</td>
</tr>
<tr>
<td>
<div onclick="decrement('{!$Component.theValue}');">&#9660;
</div>
</td>
</tr>
</table>
</apex:component>

  VF Page-

<apex:page >
<apex:pageBlock title="increase or decrease the displayed values">
<apex:form >
<c:addSubValue myvalue="10" min="0" max="15"/>
</apex:form>
</apex:pageBlock>
</apex:page>

Here is the final output, where up and down arrows are not-clickable.