Hi,

Why document.getElementById('{!$Component.ZoomName}') is always returning null?

We have an apex page where an outputText (id="ZoomName") is defined. In javascript we want to change the value of ZoomName, but {!$Component.ZoomName} is always returning null.

<apex:outputText value="30 dias" id="ZoomName" styleClass="chronoline-zoom-text"/ >

....

 <script type="application/javascript">

.....

    function loadZooms(){
       
        var zoomRecord = new Object();
        var zoomArray = new Array();
       
        zoomRecord.Id = 0;
        zoomRecord.Name= "60 dias";
        zoomRecord.visibleSpan= 5184000000;
        zoomArray[zoomRecord.Id] = zoomRecord;
       
        zoomRecord = new Object();
        zoomRecord.Id = 1;
        zoomRecord.Name= "30 dias";
        zoomRecord.visibleSpan= 2592000000;
        zoomArray[zoomRecord.Id] = zoomRecord;
       
        zoomRecord = new Object();
        zoomRecord.Id = 2;
        zoomRecord.Name= "15 dias";
        zoomRecord.visibleSpan= 1296000000;
        zoomArray[zoomRecord.Id] = zoomRecord;
       
        zoomRecord = new Object();
        zoomRecord.Id = 3;
        zoomRecord.Name= "7 dias";
        zoomRecord.visibleSpan= 604800000;
        zoomArray[zoomRecord.Id] = zoomRecord;
       
        zoomRecord = new Object();
        zoomRecord.Id = 4;
        zoomRecord.Name= "1 dia";
        zoomRecord.visibleSpan= 86400000;
        zoomArray[zoomRecord.Id] = zoomRecord;
       
        if (document.getElementById('{!$Component.ZoomName}') != null) {
            document.getElementById('{!$Component.ZoomName}').value = zoomArray[defaultZoom].Name;
        }
       
       
        return zoomArray;      
   
    }

..........

    zooms = loadZooms();
    buildChronoline();

  </script>

Many Thanks,

Altran