11

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.

Joe Thomas
  • 5,807
  • 6
  • 25
  • 36
b0y
  • 576
  • 8
  • 24
  • Why couldn't you just call `hello();` from `change();`? – b85411 May 26 '16 at 05:24
  • 1
    @b85411 I think "change();" was just meant to be an example of a DOM edit. – Joe Thomas May 26 '16 at 05:25
  • 1
    https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/ and https://developer.mozilla.org/en/docs/Web/API/MutationObserver – gurvinder372 May 26 '16 at 05:26
  • Actually the paragraph is holding a timer, i want to call a function when it become 00:00, Just to illustrate as a problem, i have added another button :) – b0y May 26 '16 at 05:27
  • http://stackoverflow.com/a/27541215/1660178 see this...it is helpfull – sangram parmar May 26 '16 at 05:30
  • @b0y do you have specific number when you want to fire that event or it should fire everytime it changes ?? Meanwhile you can have a look at "DOMNodeInserted" event. – Shashi May 26 '16 at 05:37
  • Observing for mutations... do you definitely need to do it that way? I'm not sure what problem you're trying to solve, but there might be simpler, more efficient ways to accomplish what you're trying to do. Can you share more information? – Ringo May 26 '16 at 05:39
  • @Ringo : I am receiving a value on load from backend which is showing time left in seconds. After calculation I am displaying the time left in minute and seconds. Now i have to manipulate the DOM when the timer is decreasing to 00:00. Like: if(timer == 0) // manipulate dom, change color, do some styling, alerts else if (timer != 0) // show progress bar, etc stuff I hope you get the issue now ;) – b0y May 26 '16 at 05:48
  • I think the answers you've gotten for your question are good answers for what you asked, but I think MutationObserver is unnecessary for what you really need to do. If you know how much time is left in the countdown, then all you have to do is put all your styling and formatting in a function, and call that function from a setTimeout(). Say you have 90 seconds in the countdown, just do something like: `setTimeout(function() {` `makeFormattingChanges();` `}, 90000);` `function makeFormattingChanges() {` `// styling and manipulation go here` `}` – Ringo May 26 '16 at 07:05
  • 1
    @Ringo, Yes this could be an option. But i thought of discovering some alternate ways :) – b0y May 26 '16 at 07:07

4 Answers4

12

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>
guest271314
  • 1
  • 15
  • 104
  • 177
4

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>
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
2

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>
Jitendra Tiwari
  • 1,651
  • 3
  • 14
  • 28
-1

Try with onchange attribute or maybe this one can help you:

Add event handler to HTML element using javascript

Community
  • 1
  • 1
khazrim
  • 11
  • 1