call function on change of value inside <p> tag
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>
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>
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>