Why is document.ready being called twice?

Question

$(document).ready(function() {

  var page = 1;
  var notEOF = true;
  var client = new XMLHttpRequest();
  var temp = "string";
  client.open('GET', '/blog/blogdata.txt');
  client.onreadystatechange = function() {
    if (client.responseText != '') {
      var txt = client.responseText.split("\n");
      if (notEOF && txt[page * 6 - 6] != "EOF") {
        var data = txt[page * 6 - 6].split("@");
        document.getElementById("link1").setAttribute("href", data[0]);
        document.getElementById("image1").setAttribute("src", data[1]);
        document.getElementById("title1").innerHTML = data[2];
        document.getElementById("text1").innerHTML = data[3];
        document.getElementById("tags1").innerHTML = data[4];
        document.getElementById("date1").innerHTML = data[5];
      } else {
        notEOF = false;
        $("#article1").hide();
      }
    }
  }
  var blog_html = "/blog/page";
  document.getElementById("prev").setAttribute("href", blog_html.concat((page - 1).toString()));
  document.getElementById("next").setAttribute("href", blog_html.concat((page - 1).toString()));
  if (page == 1) {
    $("#prev").addClass("disabled tm-mr-20");
  }
  if (page == 2) {
    document.getElementById("prev").setAttribute("href", "/blog/");
  }
  if (!notEOF) {
    $("#next").addClass("disabled tm-mr-20");
  }
  client.send();

});

<script src="/blog/js/jquery.min.js"></script>
<script src="/blog/js/templatemo-script.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

This is a simplified version of a script I wrote in my blog html file to automate the blog part.

blog/blogdata.txt is a textfile consisting of lines of the form url@image url@title@text@tags@date, with the last line as just EOF. (If necessary, I can restructure this). This is the structure of a blog post (ripped from here)

<article class="col-12 col-md-6 tm-post" id="article1">
  <hr class="tm-hr-primary">
  <a href="post.html" class="effect-lily tm-post-link tm-pt-60" id="link1">
    <div class="tm-post-link-inner">
      <img src="/blog/img/img-01.jpg" alt="Image" class="img-fluid" id="image1">
    </div>
    <h2 class="tm-pt-30 tm-color-primary tm-post-title" id="title1">Simple and useful HTML layout</h2>
  </a>
  <p class="tm-pt-30" id="text1">
    There is a clickable image with beautiful hover effect and active title link for each post item. Left side is a sticky menu bar. Right side is a blog content that will scroll up and down.
  </p>
  <div class="d-flex justify-content-between tm-pt-45">
    <span class="tm-color-primary" id="tags1">Travel . Events</span>
    <span class="tm-color-primary" id="date1">June 24, 2020</span>
  </div>

</article>

And this is the structure of the previous and next buttons

<div class="row tm-row tm-mt-100 tm-mb-75">
  <div class="tm-prev-next-wrapper">
    <a href="#" class="mb-2 tm-btn tm-btn-primary tm-prev-next" id="prev">Prev</a>
    <a href="#" class="mb-2 tm-btn tm-btn-primary tm-prev-next" id="next">Next</a>
  </div>
</div>

There's obviously more to the script (if there's anything necessary I'm omitting, I'll add it) but this is the important part of it.

I'm trying to run the file but it's not functioning as intended (currently, the blogdata.txt file has one non-EOF line, and thus the blog should contain exactly one post. Instead, it contains none). When I added alerts to try to debug, I observed that this script is being called twice. Why?

Answer 1

In your case

 client.onreadystatechange = function() {
   if (client.readyState === XMLHttpRequest.DONE && client.responseText != '') {

but this is better

client.open('GET', '/blog/blogdata.txt');
client.onload = function() { ... }
client.send()

Since you have jQuery

$(function() {
  var page = 1;
  var notEOF = true;
  var temp = "string";
  $.get('/blog/blogdata.txt', function(responseText) {
      if (!responseText || responseText.toString().trim() === "") return
      const txt = responseText.split("\n");
...

  });
});