b0y b0y - 6 months ago 15
HTML Question

call function on change of value inside <p> tag

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

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>