I am getting “Object Required” error message

Question

I am trying to stick a news scroller on the home page of our website.

I am a bit confused by the error message I am getting because I get it on one PC but not on another:

Object Required

I am using the below code but the following line keeps throwing Object Required error when I use this file as a web user control on my default.aspx page :

el2.style.height='<%=box_height %>';

As a result, the news is not scrolling.

Any help greatly appreciated.

<a href="#"><uc1:NewsScroller ID="NewsScroller1" runat="server" /></a>

<script language="VB" runat="server">
    Public box_TextColor As String = "black"
    Public box_height As Integer = 150
    Public box_width As Integer = 166
    Public box_padding As String = "0 0 0 20"    
</script>

<script type="text/javascript" for="window" event="onload">
// <!CDATA[
    return window_onload()
// ]]>
</script>

<script type="text/javascript">
// <!CDATA[

// <!--
    var speed = 2;
    function init(){
        var el = document.getElementById("newsdiv");
        el.style.overflow = 'hidden';
        el.style.height='<%=box_height %>';
        el.style.width='<%=box_width %>';
        el.style.padding='<%=box_padding %>';
        el.style.color='<%=box_TextColor %>';

        var el2 = document.getElementById("newsdiv-p1");
        el2.style.height='<%=box_height %>';
        var el3 = document.getElementById("newsdiv-p2");

        el3.style.height='<%=box_height %>';  
        //alert(document.getElementById("newsdiv-p2").style.height+document.getElementById("newsdiv-p2").style.height);
        scrollFromBottom();  
    }

    var go = 0;
    var timeout = '';
    function scrollFromBottom(){

        clearTimeout(timeout);
        var el = document.getElementById("newsdiv");
        if(el.scrollTop >= el.scrollHeight-'<%=box_height %>'){
            el.scrollTop = 0;
        };

        el.scrollTop = el.scrollTop + speed;
        if(go == 0){
            timeout = setTimeout("scrollFromBottom()",50);
        };
    }

    function stop(){
        go = 1;
   }

   function startit(){
       go = 0;
      scrollFromBottom();
    }
// -->

    function window_onload() {
    init();

}
// ]]>
</script>


<%--<asp:Panel ID="newsdiv" runat="server" onmouseout="startit();" onmouseover="stop();">--%>
    <div id="newsdiv"  onmouseout="startit();" onmouseover="stop();"  >
        <p id="newsdiv-p1" class="spacer"></p>
        <asp:Label ID="lblNews" runat="server" Text="News..."></asp:Label>
        <p id="newsdiv-p2" class="spacer"></p>
    </div>
<%--</asp:Panel>--%>

@Marcel, I suppose you mean the source (right-click, view source and copy the code)?

If so, here it is and again, thanks

    <script type="text/javascript" for="window" event="onload">
// <!CDATA[
return window_onload()
// ]]>
</script>

<script type="text/javascript">
// <!CDATA[

// <!--
var speed = 2;

$(document).ready(function init(){
  var el = document.getElementById("newsdiv");
  el.style.overflow = 'hidden';
  el.style.height='150';
  el.style.width='166';
   el.style.padding='0 0 0 20';
   el.style.color='black';

var el2 = document.getElementById("newsdiv-p1");

  el2.style.height='150';
var el3 = document.getElementById("newsdiv-p2");

  el3.style.height='150';  
  //alert(document.getElementById("newsdiv-p2").style.height+document.getElementById("newsdiv-p2").style.height);
  scrollFromBottom();


 }); 
var go = 0;
var timeout = '';
function scrollFromBottom(){

  clearTimeout(timeout);
  var el = document.getElementById("newsdiv");
  if(el.scrollTop >= el.scrollHeight-'150'){
    el.scrollTop = 0;

  };
  el.scrollTop = el.scrollTop + speed;
  if(go == 0){
    timeout = setTimeout("scrollFromBottom()",60);
  };
}

function stop(){
  go = 1;
}

function startit(){
  go = 0;
  scrollFromBottom();
}
// -->

function window_onload() {
init();

}

// ]]>
</script>
<div id="newsdiv"  onmouseout="startit();" onmouseover="stop();"  >
<p id="newsdiv-p1" class="spacer">
    </p>
    <span id="NewsScroller1_lblNews"><a href='#' OnClick=javascript:window.open('newsDetail.aspx?NewsID=10','NewsDetail','width=800,height=600;toolbar=no;');><font face='verdana' size='2' color='#184D68'>Steve's Birthday</font><br><br><a href='#' OnClick=javascript:window.open('newsDetail.aspx?NewsID=15','NewsDetail','width=800,height=600;toolbar=no;');><font face='verdana' size='2' color='#184D68'>Our Anniversary</font><br><br><a href='#' OnClick=javascript:window.open('newsDetail.aspx?NewsID=14','NewsDetail','width=800,height=600;toolbar=no;');><font face='verdana' size='2' color='#184D68'>Jessie's Birthday</font><br><br></span>
    <p id="newsdiv-p2" class="spacer"></p>
</div>

I am still trying to wrap my head on how this great forum works. Yesterday, I was able to see a button that says, "Add comment". Since today, I have not been able to see it. I guess my question is, how do you log back in so you are able to add comments, etc? Login appears to be cookie-driven which means that your priviledges disappear once you close the browser, no?

Answer 1

In this case, the error message 'Object required' means that variable el2 doesn't contain an HTMLElement object.

ID's of elements are case-sensitive, so you can't get the element

<p id="newsdiv-p1" class="spacer"></p>

using

var el2 = document.getElementById("newsDiv-p1");

Moreover, you can't access elements that have not been rendered yet. Put your function in an onload handler or after the markup.

BTW, the language attribute of the script element has been deprecated long ago.

---

Update: this piece of code

<script type="text/javascript" for="window" event="onload">
// <!CDATA[
    return window_onload()
// ]]>
</script>

uses an IE-specific way to attach an event handler. Never use it!

Instead, use a DOM level 2 method or just

window.onload = window_onload;

Answer 2

You need to ensure that the DOM is ready before you start to interact with it.

I'd recommend using jQuery and wrapping your DOM-interactive code in the .ready() event hander, like this:

$(document).ready(function(){
   init();
});

That way you can be sure that all your elements exist before you start to reference them, as stated in the jQuery API reference :

The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

Answer 3

Make sure that you have java script functions available in your page. Some times you get such errors when no method is accessible.

Answer 4

put your script tags after newsDiv. I think the problem arises because the html hasn't rendered yet.