Trigger JavaScript event if div innerText change

Question

I want to make an alert when a div's innerText changes:

myDiv.addEventListener("change", function() {
    if (myDiv.innerText != "some text")
        alert('innerText has changed.');
},false);

Does not work.

Sewole

possible duplicate of Jquery Event : Detect changes to the html/text of a div, #4980238 – Hygiene

not possible in pure JS? – Sewole

Way easier option to do this in JQuery. #15658186 – Sickler

thank you all, but the topic title is: "Javascript". – Sewole

This div, is it a content editable, or just a regular div? – Stampede

it is regular div.. I want to detect when its text is changed by a third function.. so the event listener detect any change.. – Sewole

Mutation observer might help you to find a solution. You can also search for it at SO, there's lot of questions about mutation events. – Stampede

in this example an interval is used as third function that changes the text – Sewole

Why don't you store the innerText in a variable and then test to see if it's different than the variable? Or is this in a textField and you want to check AS they type. – Combustion

The original text is changed by a function that I don't know, so I need to a listener that detect whatever change of the text – Sewole

I found a solution! Many Thanks to you All! :) see update – Sewole

Thanks for wanting to make your solution available to readers. However, the question is not the best place for this - we welcome self-answers here, so if you find the answer before someone else, add a answer and mark it as correct by clicking on the tick. – Hindustani

Answer 1

myDiv.addEventListener("DOMCharacterDataModified", function (event) { // ... add your code he }, false);

use DOMCharacterDataModified to detect innerText change event

Erwinery

As per W3C, Mutation Events have been deprecated in favor of MutationObserver – Lenten

Answer 2

Posted on behalf of the OP.

I found a solution:

// THIRD FUNCTION (changes the text)
var i = 0;
function thirdFUN(){
    i++;
    var popo = document.getElementById('myDiv');
    popo.innerText = i;
}
setInterval(thirdFUN, 500);

//---------------------------------------------------------------

// JQUERY
/*var popo = $('#myDiv');
$('#myDiv').bind("DOMSubtreeModified",function(){
    if (popo.html() == "10")
    console.log('changed');
});
*/

//---------------------------------------------------------------

// PURE JS
window.onload = function(){

var popo = document.querySelector('#myDiv');

var observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
        console.log(mutation.type); // <- It always detects changes
        if (popo.innerHTML == "10"){
            alert('hello');
        }
    });    
});

var config = {characterData: true, subtree: true};
observer.observe(popo, config);
//observer.disconnect();

}

This is also a JS Fiddle.

Hindustani

doesn't seem to work any more – Hudspeth

@AkashJain: you may need to post a new question. If you do so, show what code you have presently and where you think it is not working specifically. – Hindustani

actually it the JS fiddle that is provided in the link, its not working anymore – Hudspeth

Answer 3

The change event isn't specified to fire at any point the text changes. It fires only when the textarea loses focus (the user clicks away or tabs away). So your event will only fire when this happens.

Aside from continually checking the value of the textarea with an interval, there is no elegant way to do this (to my knowledge).

Note in this fiddle that the change event only fires after the textarea has lost focus.

See this answer for more info...

Leff

Answer 4

Can't comment on the top answer since not enough reputation, but according to MDN, Mutation Events (so including DOMCharacterDataModified) were deprecated and shouldn't be used anymore. Luckily, you can get the same thing with Mutation Observers now.

Grenadine

Could you please share example code which utilizes Mutation Observers? – Amaranthine

Answer 5

try

document.addEventListener("change", function() ......

Sickler