Keep Array up-to-date as new elements appear on the webpage

Question

Keep Array up-to-date as new elements appear on the webpage

Currently, I am developing a Chrome extension that requires me to retrieve the total number of books available in a library. The current code snippet is functioning correctly, but the issue arises when the page loads only half of the books initially and updates as you scroll down further, causing the array not to update accordingly. Is there a way to automatically refresh the array to reflect these changes?

let list = document.querySelectorAll("ul > li");
let numBooks = [];

for (let i = 0; i < list.length; i++) {
  numBooks.push(i + 1);
}

console.log(numBooks);

javascript arrays

Answer 1

Answer №1

// Declaring variables
let itemList = document.querySelectorAll("ul > li");
let mainList = document.querySelector("ul");
let bookNumbers = [];

// Adding books to array
for (let index = 0; index < itemList.length; index++) {
  bookNumbers.push(index + 1);
}

// Observing changes
const mutationObserver = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    if (mutation.addedNodes.length) {
      // Creating element for displaying book count
      let myUrl = "myurl";
      let numBooks = bookNumbers.length / 10;
      let numChanges = mutation.addedNodes.length - 1;
      if (myUrl == window.location.href) {
        let elem = document.createElement("span");
        elem.innerHTML = numBooks + numChanges;

        let parentElement = document.getElementsByTagName("h2")[0];
        parentElement.appendChild(elem);
      }
    }
  });
});
mutationObserver.observe(mainList, {
  childList: true,
});

Answer 2

// Declaring variables
let itemList = document.querySelectorAll("ul > li");
let mainList = document.querySelector("ul");
let bookNumbers = [];

// Adding books to array
for (let index = 0; index < itemList.length; index++) {
  bookNumbers.push(index + 1);
}

// Observing changes
const mutationObserver = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    if (mutation.addedNodes.length) {
      // Creating element for displaying book count
      let myUrl = "myurl";
      let numBooks = bookNumbers.length / 10;
      let numChanges = mutation.addedNodes.length - 1;
      if (myUrl == window.location.href) {
        let elem = document.createElement("span");
        elem.innerHTML = numBooks + numChanges;

        let parentElement = document.getElementsByTagName("h2")[0];
        parentElement.appendChild(elem);
      }
    }
  });
});
mutationObserver.observe(mainList, {
  childList: true,
});

Keep Array up-to-date as new elements appear on the webpage

Answer №1

Similar questions

Customizing Django forms.Textarea in template or declaring in models is essential for creating a unique

Is it possible to automatically play a sound clip when the page loads?

Displaying a clock using PHP

Socket.on seems to be malfunctioning

Craft an engaging and dynamic Image map with SVG technology to elevate responsiveness and interactivity

MongoDB's Data-Driven Dropdown

Manage the orientation of an object circling a sphere using quaternions

Adding elements in the center of a given array

How can we stop every tab pane in (bootstrap five) from sharing the same scroll position? Each tab is currently synchronized with the scroll position of the others

React-Query will not automatically refetch data on mount when using an invalidated query

Display recommendations as soon as a specific character is entered in the text box

Annoying underlines from JavaScript active links - no thanks!

Identifying unique characters such as ^A within a byte array

Best method for retrieving information from a string

Restrict HTML Elements Based on Their Size

Ways to run a javascript command just a single time

How can I toggle input disablement in Bootstrap depending on switch selection?

Creating a customized Chrome extension that triggers a script upon the user selecting and highlighting text on a webpage

Triggering an event just once upon sending an Ajax request with jQuery

Using Typescript with Material UI Select