I am currently seeking a way to execute a JavaScript function whenever the content within a specific element (such as div, span, p) is altered. I had initially assumed that there might be a universal event for this, much like onchange, but I've come to realize that onchange does not apply to divs and I haven't discovered an alternative yet.
Despite my efforts to look into it, all I could find were jQuery solutions to this issue.
If you're working in modern browsers, consider using Mutation observers for detecting changes in the DOM. For older browsers like IE9-10, Mutation Events can be used instead. Keep in mind that IE versions below 9 do not support these events. In such cases, you can utilize the onpropertychange event which is triggered under specific circumstances.
Here's an example showcasing the Mutation Observer:
var observer = new MutationObserver(function (m) { // Setting up the observer
console.log(m);
}),
elem = document.getElementById('test');
observer.observe(elem, {childList: true}); // Activating the observer
setTimeout(function () {
elem.textContent += ' This additional text will trigger the Mutation Observer.';
}, 2000);
You can view a live demonstration on jsFiddle.
If you're looking for a solution, consider using MutationObserver along with setInterval as a fallback for IE11-. For further details, refer to MutationObserver.
UPDATE
Check out the code snippet below:
var TextObserver = function () {
};
TextObserver.prototype.observe = function (target, callback) {
var self = this;
self.target = target;
if (window.MutationObserver) {
self.observer = new MutationObserver(function (mutations) {
if (mutations.length) {
var m = mutations[0];
callback && callback(self.target.textContent, m.oldValue);
}
});
self.observer.observe(self.target, {
subtree: true,
characterData: true,
characterDataOldValue: true
});
} else { //for IE11-
self._oldText = self.target.innerText;
self.observer = setInterval(function () {
var newText = self.target.innerText;
if (self._oldText !== newText) { //changed
callback && callback(newText, self._oldText);
self._oldText = newText; //replace the old text;
}
}, 300);
}
return self;
};
new TextObserver().observe(document.getElementById('test'), function (newValue, oldValue) {
alert('New value:' + newValue + '; oldValue: ' + oldValue);
});
To see a live demonstration of this functionality, visit the following demo on jsfiddle.
In my exploration of three.js optimization, I discovered that reducing the number of draw calls is crucial for improving performance. One way to achieve this is by consolidating geometries through the use of GeometryUtils.merge. Although this optimization ...
I recently completed a project on Github and created a corresponding Github Page for it. The page features multiple buttons with different functions, but oddly enough, one specific button is not showing up on the Github Page. Surprisingly, it appears perfe ...
Below is the Interface being used in conjunction with mapStateToProps: export interface IStore { cache?: any; dataManager?: IUR; userPrefs: IUP; IModal?: IfingerprintModal; } export interface IModal { cbCancel: IFModalFn | null; cbTryAgain?: I ...
One issue that arises is that although the replacement functions as expected, all occurrences are replaced with the first find. (For example, see code below). The variable target represents the input field that contains the string to be highlighted, while ...
Struggling with implementing a slideshow banner on my webpage, despite following the W3 tutorial. Here is the code I am currently using: HTML: <div class="slide-content" style="max-width:1000px"> <img class="slidepic" src="testheadphoto.jpg" st ...
After developing a tool to automate visual regression within an E2E test suite, I have encountered a challenge when trying to measure visual regression with autoplaying HTML5 videos. Due to the dynamic nature of videos and the variability in Browserstack&a ...
Hey everyone, I'm currently working on a project that involves a plane moving along a polyline, but I'm facing an issue where the path symbol is not centered as demonstrated in this image This is what I have: Here, I define the path symbol as t ...
When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...
I'm facing an issue with loading additional HTML onto a page in my project when a link is clicked. The HTML fragment file I want to load is stored in a different folder within the project structure. Despite my efforts, I keep encountering a 404 error ...
I am new to exploring express.js and attempting to create a basic sign-in example server. I have set up a database object with a users array containing objects, each with email and password properties. Despite using body-parser to convert the body into a j ...
An error occurred: Uncaught TypeError: Cannot read property 'login' of undefined........... import Login from '../components/Login.jsx'; import { useDeps, composeWithTracker, composeAll } from 'mantra-core'; export const com ...
Currently, I am in the process of developing a tracking system to monitor referrals to our websites on behalf of third-party website owners. This involves placing a cookie when a customer clicks through to our site and then extracting their ID from this co ...
My PHP form has a layout similar to this: <form> <div id="inid"> National ID: <input type="text" id="individual_nid" oninput="getIndividualName(this.value)" /> </div> <hr /> name: <div id="individua ...
I am facing an issue with running a second process under JQuery, as shown in the code snippet below: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <script type=" ...
Hey there! I recently put together this awesome site and I'm facing a challenge with fixing text on the first slide, specifically the one featuring the Nike basketball. Right now, the text 'The first of its kind' is part of the background im ...
Issue: I am encountering difficulty in sending a JSON-encoded variable to a PHP page using jQuery/AJAX. Here is my current approach. The file is uploaded through It undergoes processing using jQuery based on the following JS code. JS code: <scrip ...
Currently, I am facing an issue with adding a background image to the generated SVG DOM in my web page. The user interacts by drawing an SVG doodle on top of a jpg image using Raphael. After the user is done with their drawing, I want to enable them to sa ...
Currently, I am utilizing express to handle my REST API functionality. However, when retrieving objects, it is returning a wrapped array instead of a simple array which I would prefer. This is how my code currently appears: router.get('/objects' ...
I have a slide page on Ionic V1 that utilizes previous and next buttons. Here is an example: <button id="" class="button button-slide prev no-animation" ng-click="prev()" ng-show="activeIndex > 0" > BACK </button> While the click function ...
Two functions are defined here: Method 1 returns any type dynamically, while Method 2 returns generic types. Method 1 public dynamic dynamicFun(int n) { switch (n) { case 0: return 0; ...