How can I check if text content on page changed?

Question

I want to check if the text content in the var cart changes its on this page: https://www.supremenewyork.com/shop/all

let cart = document.getElementById('items-count').textContent;

console.log(cart);
cart.addEventListener('change', function() {
 console.log("cart");
 window.location.replace("http://stackoverflow.com");
});

I get this error

Uncaught TypeError: cart.addEventListener is not a function at chrome-extension://ljhadajgdcijdfoopfbkjibfebkilieh/supreme.js:11:6

The script starts when I enter the page.

I already tried to Monitor it with a while loop like in the following code but then the website freezes and I cant use it anymore until the var change

let carted = 0
let cart = document.getElementById('items-count').textContent;
while (carted < 1 ) {
console.log(cart);
if (cart.length > 2) {
    cart ++;
    window.location.replace("http://stackoverflow.com");
    }
}

Answer 1

Because you are trying to add an event listener to your element's textContent, not to your element, and you can't do that. Just do this

let cart = document.getElementById('items-count');

console.log(cart);
cart.addEventListener('change', function() {
 console.log(`cart content has changed — ${cart.textContent}`);
 window.location.replace("http://stackoverflow.com");
});

Answer 2

If you want to add a listener, you can't do it to textContent.

let cart = document.getElementById('items-count'); //.textContent

console.log(cart);
cart.addEventListener('change', function() {
 console.log("cart");
 window.location.replace("http://stackoverflow.com");
});

If you need that value, you can store it on another variable:

var content = cart.textContent

Answer 3

You could

var item = document.getElementById('items-count');
item.addEventListener("change", DoStuff);
function DoStuff(){
//do what do you want to do.
}