Hello Everyone!
My javascript is very basic and I was looking online for a way to this but couldn’t find one.
My work has a unique webpage I log into in order to recieve support calls. It has an indicator that counts new callers at the top of the page that I inspected in chrome and saw it has a unique html id="…" tag.
Can I use javascript/chrome console to listen to this specific part of the page and make a sound when it dynamically updates (“number of calls” text changes)?
Thanks!
Noam
Yes you can.
Which part is updating? The html?
The text itself is updating. I’m pretty sure it’s the html because when Inspect it I can see the actual number within a span tag and when it changes the chrome inspector resets.
const getElement = (element) => document.querySelector(element);
const init = () => {
const $span = getElement('#ELEMENT_ID_GOES_HERE');
const options = { subtree: true, childList: true };
const observer = new MutationObserver((mutationsList, observer) => {
for (let mutation of mutationsList){
if (mutation.type === 'childList')
alert('change made!');
}
});
observer.observe($span, options);
};
init();
The other way would be to use setTimeout and recursively check the value.
Thanks for that! It looks like exactly what I was looking for. However, console returns “Uncaught TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.”
I understand that it means that the element does not exist when the functions searches for it and, as you said, it requires setTimeout.
I tried and it doesn’t work, sorry if I made a basic mistake 
:
const getElement = (element) => document.querySelector(element);
const init = () => {
const $span = getElement(‘myid’);
if(!$span) {
window.setTimeout(init,500);
return;
}
const options = { subtree: true, childList: true };
const observer = new MutationObserver((mutationsList, observer) => {
for (let mutation of mutationsList){
if (mutation.type === ‘childList’)
alert(‘change made!’);
}
});observer.observe($span, options);
};init();
No no. The setTimeout suggestion is if you didnt use MutationObserver.
Are you forgetting the # in front of your id?
You don’t need this part:
if(!$span) {
window.setTimeout(init,500);
return;
}
So remove that.
example.
<span id="blah">4</span>
should be
const $span = getElement('#blah');
and not
const $span = getElement('blah');
Hey, it’s not just getElement you have to be specific, there are a lot of ways to get an element.
.getElementsByClass();
.getElementsByTagName();
.getElementsByName();
.getElementById();
.querySelector();
.querySelectorAll();
In your guy’s case, it’s .getElementById();, because you guys are trying to grab an element that has an id so that would look like this:
document.getElementById("id-name"); //No need the # on
@Catalactics
Go back and reread beginning of my code.
const getElement = (element) => document.querySelector(element);
@kerafyrm, Now it makes sense, sorry for the confusion. That’s not a normal practice for me.
@Catalactics
It helps make code more readable in larger projects.
typing
document.querySelector('.blah')
document.getElementById('blah')
vs
getElement('.blah')
getElement('#blah')
I originally tried all the choices you guys suggested, with/without #, getElement, getElementById… all returned the node not found error.
In the new code with the setTimeout, it keeps returning “undefined”
You dont use setTimeout() at all.
Do this, right click element, click inspect, then right click element in DOM:
And plug that value in there.
If your element is inside an iframe then there’s several other annoying steps you’ll have to do to get the element.
The “copy selector” copies the same id I already used.
Now that I checked the source code I see it uses an Iframe like you suggested
The Iframe refers to a .aspx file that when I go into shows the entire upper portion of the original call screen and seems like it keeps auto refreshing.
Yeah it is, but it’s harder for other people to catch it without putting in comments when you’re declaring the variable.
