call function on change of value inside <p> tag

Question

Is there any way in JavaScript by which I can call a function when the value of a paragraph tag is changed.

Overview:

HTML:

<p id="timer">00:00</p>
<button onclick="change()">My Button</button>

JS:

function change() {
  document.getElementById("timer").innerHTML = "00:01";
}

function hello() {
  alert("Hello");
}

I want to alert("Hello") when the value of paragraph is changed. Something like a continuous function checking for a change in the value of paragraph.

Answer 1

One more option to do this

function change() {
  document.getElementById("timer").innerHTML = new Date().getTime();
}

var prevValue = document.getElementById("timer").innerHTML;

setInterval(function() {

  currValue = document.getElementById("timer").innerHTML;

  if (prevValue != currValue) {
    prevValue = currValue;
    hello();

  }

}, 1);

function hello() {
  alert("Hello");
}

<p id="timer">00:00</p>
<button onclick="change()">My Button</button>

Answer 2

You can use MutationObserver with characterData option set to true

<script>
  function change() {
    document.getElementById("timer").innerHTML = "00:01";
  }

  function hello() {
    alert("Hello");
  }
  window.onload = function() {

    var target = document.querySelector("p");

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        hello()
      });
    });

    var config = {
      childList: true,
      subtree: true,
      characterData: true
    };

    observer.observe(target, config);
  }
</script>

<p id="timer">00:00</p>
<button onclick="change()">My Button</button>

Answer 3

Try this MutationObserver API, (Check this simple example as well)

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        //value changed, call the other API
        hello();
    });    
});
var observerConfig = {
    characterData: true //since only the node-value needs to be checked in your case
}; 
var targetNode = document.getElementById("timer");
observer.observe(targetNode, observerConfig);

DEMO

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    //value changed, call the other API
    if ( mutation.type="childList" )
    {
       hello();
       //observer.disconnect();
    }
  });
});
var observerConfig = {
	childList: true
};
var targetNode = document.body;
observer.observe(targetNode, observerConfig);


document.getElementById("timer").innerHTML = "0.2";

window.hello = function (){
  alert(1);
}

<p id="timer">0.0</p>