+ Start a Discussion
jaanvivekjaanvivek 

Up and Down Arrows are not clickable in Visualforce component

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.

 

 
These two arrows are not clickable.
 
 
Thanks for you help.
 
Thanks & regards,
jaanVivek

 

 

Best Answer chosen by Admin (Salesforce Developers) 
Alok_NagarroAlok_Nagarro

Hi,

 

There is small mistake you have done, at line 17 & 32 in your component code you misspelled "document", just need to fix that.

All Answers

jaanvivekjaanvivek

Could anyone help me in this.

 

 

Thanks,

jaanVivek

Alok_NagarroAlok_Nagarro

Hi,

 

There is small mistake you have done, at line 17 & 32 in your component code you misspelled "document", just need to fix that.

This was selected as the best answer