0

I'm reposting this question trying to be more specific, please note this is very similar to

Any way to fire an event off when a style is changed in chrome dev tools?

but I'm struggling to find a super easy way to track the changes in the properties of an element in order to fire an event.

In particular, the element I want to track is a play/pause button, when the button is pressed the property "title" changes from "Play" to "Pause". Below the button and all its properties.

<canvas class="playbarBigButton" width="48" height="28" title="Play" tabindex="10002" role="button" style="margin-top: 4px; margin-left: 8px;" id="Play" aria-labelledby="PlayaccStr"><div id="PlayaccStr" class="cp-accessibility" style="transform: translate3d(0px, 0px, 0px);"><p style="transform: translate3d(0px, 0px, 0px);">Play</p></div></canvas>

What I'd like to do is to fire a "click" event on a button whenever the "Title" property changes, this way I can force the playback of the video even when it stops automatically.

This is my code so far, I'm using the console since it's the only thing I can handle with my limited knowledge

let a = document.getElementById('Play');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === "attributes") {
      a.click()
    }
  });
});

observer.observe(element, {
  attributes: true
});

The problem with this code is that it generates an infinite loop since it will track every change, when the click function is called the observer will call another click and so on. I'd like to track specifically the title property to change to "Pause".

James Biffi
  • 47
  • 5

1 Answers1

0

Solved

var element = document.getElementById('Play');

var b = 'Play';

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === "attributes") { if (element.title == b) {
      element.click()
    }}
  });
});

observer.observe(element, {
  attributes: true
});
James Biffi
  • 47
  • 5