8

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
  • 2
    possible duplicate of [Jquery Event : Detect changes to the html/text of a div](http://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div), http://stackoverflow.com/questions/4979738/fire-jquery-event-on-div-change – Nivas Jun 24 '14 at 14:17
  • not possible in pure JS? –  Jun 24 '14 at 14:19
  • Way easier option to do this in JQuery. http://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div – FuzZ63 Jun 24 '14 at 14:19
  • thank you all, but the topic title is: "Javascript". –  Jun 24 '14 at 14:26
  • This `div`, is it a content editable, or just a regular `div`? – Teemu Jun 24 '14 at 14:28
  • it is regular div.. I want to detect when its text is changed by a third function.. so the event listener detect any change.. –  Jun 24 '14 at 14:34
  • [Mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) might help you to find a solution. You can also search for it at SO, there's lot of questions about mutation events. – Teemu Jun 24 '14 at 14:35
  • in [this example](http://jsfiddle.net/BrtAK/) an interval is used as third function that changes the text –  Jun 24 '14 at 14:40
  • 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. – Josh Jun 24 '14 at 14:50
  • 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 –  Jun 24 '14 at 14:56
  • I found a solution! Many Thanks to you All! :) see update –  Jun 24 '14 at 15:31
  • 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. – halfer Jun 25 '14 at 22:52

5 Answers5

15

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

use DOMCharacterDataModified to detect innerText change event

Vishal choudhary
  • 315
  • 4
  • 10
  • [As per W3C](https://www.w3.org/TR/DOM-Level-3-Events/#legacy-mutationevent-events:~:text=Thus%2C%20this%20specification%20describes%20mutation%20events%20for%20reference%20and%20completeness%20of%20legacy%20behavior%2C%20but%20deprecates%20the%20use%20of%20the%20MutationEvent%20interface.), Mutation Events have been deprecated in favor of [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) – HudsonGraeme Sep 18 '22 at 05:32
7

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
0

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...

Community
  • 1
  • 1
shennan
  • 10,798
  • 5
  • 44
  • 79
0

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.

Adam
  • 13
  • 5
-3

try

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

FuzZ63
  • 90
  • 8