Trigger JavaScript Event If Div Innertext Change

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:

HTML

<span class="observable" contenteditable="true">12345</span>
JS

var 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



Leave a reply



Submit