Javascript Eventlistener for Update / Change on Element / innerText
Check out the MutationObserver. Using it you can listen to changes of the observed element's characterData
. Example:
<span class="observable" contenteditable="true">12345</span>
JSvar observables = document.querySelector('.observable');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});
var config = {characterData: true, subtree: true};
observer.observe(observables, config);
FIDDLE
Note that subtree
has to be true
because the text actually is a child element of the observed element.
Fire jQuery event on div change
You can use DOMNodeInserted
and DOMNodeRemoved
to check if elements are added or removed. Unfortunately, IE doesn't support this.
$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
if (event.type == 'DOMNodeInserted') {
alert('Content added! Current content:' + '\n\n' + this.innerHTML);
} else {
alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
}
});
Update
You could save the initial contents and future changes with .data()
. Here's an example.
var div_eTypes = [],
div_changes = [];
$(function() {
$('#myDiv').each(function() {
this['data-initialContents'] = this.innerHTML;
}).bind('DOMNodeInserted DOMNodeRemoved', function(event) {
div_eTypes.concat(e.type.match(/insert|remove/));
div_changes.concat(this.innerHTML);
});
});
Example output:
> $('#myDiv').data('initialContents');
"<h1>Hello, world!</h1><p>This is an example.</p>"
> div_eTypes;
["insert", "insert", "remove"]
> div_changes;
["<iframe src='http://example.com'></iframe>", "<h4>IANA — Example domains</h4><iframe src='http://example.com'></iframe>", "<h4>IANA – Example domains</h4>"]
Update 2
You may want to include DOMSubtreeModified
as well, because I've found out that DOMNodeInserted
and DOMNodeRemoved
don't trigger if an element's innerHTML
is replaced directly. It still doesn't work in IE, but at least it works fine in other browsers.
Fire a function when innerHTML of element changes?
Use DOMSubtreeModified
event:
var element = document.getElementById('div');
element.addEventListener('DOMSubtreeModified', myFunction);
function myFunction(e) { console.log(element.innerHTML);}
setTimeout(function(){ element.innerHTML = 'Hello World!';}, 1000);
setTimeout(function(){ element.innerHTML = 'Hello Space!';}, 2000);
<div id="div"></div>
Fire event when inner html in div changed
You can do it by extending the $.html function. Like this:
(function($)
{
var oldHtml = $.fn.html;
$.fn.html = function()
{
var ret = oldHtml.apply(this, arguments);
//trigger your event.
this.trigger("change");
return ret;
};
})(jQuery);
Attach event handler:
$("#calcInfo").on("change",function(){
if ($(this).text().trim().length > 0) {
$(this).slideDown('slow', function() {});
};
});
When you need to change your html. Do it like this:
$("#calcInfo").html('someText');
Trying to update the innerText of an HTML element when a button is clicked in JavaScript
You used the operator
===
which will compare the values. To assign a value use
command.innerText = 'Something';
Then you commandChange function will run once instead of every click event.
You should put the function inside the click event.
const btns = document.querySelectorAll('.links');
const osBtns = document.querySelectorAll('.OSVersion')
const command = document.querySelector('.Command')
btns.forEach(btn => {
btn.addEventListener('click', e => {
// remove any existing active links
btns.forEach(b => b.classList.remove('colorText'));
// activate the clicked link
e.target.classList.add('colorText');
commandChange();
})
});
function commandChange() {
if (btns[1].classList.contains('colorText')) {
command.innerText = "# MacOS Binaries dont support CUDA, install from source if CUDA is needed conda install pytorch torchvision torchaudio -c pytorch"
} else {
command.innerText = "conda install pytorch torchvision torchaudio cudatoolkit=10.2 -c pytorch"
}
}
<section class="PyTorch">
<div class="listWrapper">
<ul class="listContents">
<li>
<p>PyTorch Build</p>
</li>
<li>
<p><a href="#" class="links">Stable (1.10.2)</a></p>
</li>
<li>
<p><a href="#" class="links">Preview (Nightly)</a></p>
</li>
<li>
<p><a href="#" class="links">LTS (1.8.2)</a></p>
</li>
</ul>
<ul class="listContents">
<li>
<p>Your OS</p>
</li>
<li>
<p><a href="#" class="OSVersion">Linux</a></p>
</li>
<li>
<p><a href="#" class="OSVersion">Mac</a></p>
</li>
<li>
<p><a href="#" class="OSVersion">Windows</a></p>
</li>
</ul>
<ul class="listContents">
<li>
<p>Run this Command</p>
</li>
<li>
<p class="Command">conda install pytorch torchvision torchaudio cudatoolkit=10.2 -c pytorch</p>
</li>
</ul>
</div>
</section>
How to run javascript code when the value of a selected item changes
you can track changes in input fields with oninput
event listener . now it will trigger your check function each time when input field is changed
function hidenv() {
var inputEl = document.querySelector(".wapf-grand-total"),
btn = document.querySelector("button"),
isVal260 = inputEl.value == "$260"
btn.hidden = isVal260
}
document.querySelector(".wapf-grand-total").addEventListener("input",hidenv)
// hidden method update suggested by @connexo
<input type="text" class="wapf-grand-total">
<button>button</button>
How can I get elements inner text after dom is being refreshed after the submit button?
to fix my issue, I thought of using window.open("URL") by creating a variable for it and then using it to process my the whole automation process on the new window and I was able to get all the result message from the new window
var newWindow = window.open("the URL");
newWindow.$('input[id="input"]').val("1234").trigger('change');
etc...
Related Topics
How to Compress an Image Via JavaScript in the Browser
Uncheck a Checkbox and Another Checkbox Will Untick
Preventing Viewport Resize of Web Page When Android Soft Keyboard Is Active
Angular 4: Cannot Instantiate Cyclic Dependency! Injectiontoken_Http_Interceptors
Jquery Class on Click Works on Desktop But Not Mobile
How to Get the Contextpath from Javascript, the Right Way
React Passing Import Name as Prop and Adding to Image Src
Jquery Wait Until Ajax Call Has Got Data Before Displaying
Discord.Js Ban/Kick Commands Available to All Users. How to Fix This
Size of Json Object (In Kbs/Mbs)
Swiper Slider - Thumbs Gallery With Slidetoclickedslide Do Not Work Properly
Programmatically Clicking Button in React Native
How to Determine Server Disconnection from Signalr Client
How to Detect iPad and iPad Os Version in iOS 13 and Up
How to Create a Dynamic Jquery Data Table With Json Data and Ajax
Disable Pdf Download and Save Option