onload method refuses to fire function on my page using javascript

Question

Hello I have built a chat system, using html and JavaScript (ajax).

There are a lot of messages loaded in the chat and it goes down the page.

So I tried to devise a way for the chat messages to be scrolled down onload of the chat page using the function below.

<script>
  function scrolldown() {
    var box = document.getElementById('chatmessagecontainer');
    box.scrollTop = box.scrollHeight;
  }
</script>

but onload method never fires this function,

<body onload="scrolldown()">

However, I noticed that onclick of a button the function fires, like below

<input type="button" id="sub" onclick="scrolldown()" name="click" value="click" />

Messages are loaded into the chat container by the below function in this id "#display_info".

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<script type="text/javascript">
  setInterval(loaddata, 1000);

  function loaddata() {
    var msgid = document.getElementById('msgid');

    if (msgid) {
      $.ajax({
        type: 'post',
        url: 'load.php',
        data: {
          msgid: msgid.value,
        },

        success: function(response) {
          // We get the element having id of display_info and put the response inside it
          $('#display_info').html(response);
        },
      });
    } else {
      $('#display_info').html('Please Enter Some Words');
    }
  }
  </script>

Why doesn't the onload method run my function?

And we need more info (preferable as [mcve]). Where is the script tag located (head, body (top/bottom))? How and when are the messages added when first loading the page (is `scrolldown()` called after the messages have been added to the DOM)? Is there any error in the console? — Andreas, Feb 09 '19 at 17:13
another div carries messages into it, chatmessagecontainer is just the design for the chat layout — Lloyd, Feb 09 '19 at 17:13
Try delaying execution of your function, for instance, 2 seconds, by wrapping its content inside a `setTimeout` call. I suspect that maybe all of the page elements are available at DOM but are not drawn yet. — Chris Tapay, Feb 09 '19 at 17:15
Did you try putting console.log calls in your function to verify if the function is being called or not? Eventually the function is being executed however the box has no height yet and it just scrolls to 0 which is the top of the document. — Danilo Cabello, Feb 09 '19 at 17:26
hi @ChrisTapay pls make ur comment an answer that seemed to work. thanks — Lloyd, Feb 09 '19 at 17:30
If you add a [mcve] we'll most like can provide a proper answer, as using a `setTimeout` to create a delay is way to brittle and won't guarantee it to work. — Asons, Feb 09 '19 at 17:54
And btw, the method is most likely called, though long before your container has any content, hence it all appears to not work. — Asons, Feb 09 '19 at 17:58

Chris Tapay · Accepted Answer · 2019-02-09T18:21:06.027

-1

Try delaying execution of your function, for instance, 2 seconds, by wrapping its content inside a setTimeout call. I suspect that maybe all of the page elements are available at DOM but are not drawn yet.

Update: While the setTimeout is an approach that may work, it is basically a trick. Please notice that ideally, you should watch the element and make sure it's available and/or contains children before trying to scroll. And you can use Mutation Observer for that. Hope it helps.

edited Feb 09 '19 at 18:21

answered Feb 09 '19 at 17:36

Chris Tapay

1,004
10
21

i dont know why his answer has been marked down, but he seemed to understand my problem and gv me a solution to wat exactly i ws looking for according to my approach – Lloyd Feb 09 '19 at 18:22

onload method refuses to fire function on my page using javascript

1 Answers1