CODEWITHSUNDEEP
javascripthtmlonchange
Rafael Morais dos Santos
Rafael Morais dos Santos

Reputation: 296

Use onchange in a div

Is it possible to use onchange event in a <div>?

Because my <div> changes its text inside.

Can I do something like this? 

<div id="name" onchange="calculateTotal();"></div>

Upvotes: 16

Views: 75724

Answers (9)

doc_id
doc_id

Reputation: 1433

As other answers say, calculateTotal will not fire when div text content change. However, if that div contains an input as child, then calculateTotal would fire if user changed that child input, like checking a checkbox. It's just because of the change event of input could be propagating up the DOM tree, a feature of events called Event Propagation.

Upvotes: 0

Griffin
Griffin

Reputation: 851

It's a bit over most webdesigners paygrade, but it's not any problem to monitor a div using the dom. It's also pure vanilla javascript, so nothing required.

The most easy way to show it is with a example. The Div is editable so just click on it and type something and your javascript console will show what is going on. (if you don't know your way around the javascript debugger this might be to hard for you, so just learn it ;) )

<html>
<head>
<script>
        // Run the code once the DOM is created, think jquery $(function(){}); but HTML5
        document.addEventListener("DOMContentLoaded", function () {
            const commandlineDiv = document.getElementById('commandline');
            function mutationCallback(mutationsList, observer) {
                console.log(mutationsList);
                console.log(observer);
                for (const mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        console.log('A child node has been added or removed.');
                    } else if (mutation.type === 'attributes') {
                        console.log('The ' + mutation.attributeName + ' attribute was modified.');
                    } else {
                        console.log('mutation.type: ' + mutation.type);
                        console.log('New value ' + JSON.stringify(mutation.target.data));
                    }
                }
            }
            // Create an observer instance linked to the callback function
            const observer = new MutationObserver(mutationCallback);
            // What to observe
            const mutationConfig = { attributes: true, childList: true, subtree: true, characterData: true };
            observer.observe(commandlineDiv, mutationConfig);
        })

</script>
</head>
<body>
<div id="commandline" contentEditable="true">commandline</div>
</body>
</html>

Upvotes: 5

HellJosun
HellJosun

Reputation: 137

You can use 'onInput' instead of 'onChange'.

<div className="inputDiv" contenteditable="true" onInput={(e) => { console.log(e.currentTarget.textContent) }} />

Check the console log with Chrome Developer Tools (F12):

enter image description here

References: https://stackoverflow.com/a/52614631/8706661

Upvotes: 3

djadweb
djadweb

Reputation: 33

Change your div to a textarea or button or input You can't use onchange in div

Upvotes: -1

Sumit Kumar Gupta
Sumit Kumar Gupta

Reputation: 2364

You can use onblur event. Onblur event working on table,div etc.

<div id="name" onblur="calculateTotal();"></div>

Upvotes: -1

Guffa
Guffa

Reputation: 700162

As you are changing the text yourself, just call calculateTotal when the AJAX call completes and the text has been placed in the element.

Example (using jQuery):

$('#name').load('GetFragment.php', calculateTotal);

Upvotes: 4

SergeS
SergeS

Reputation: 11779

Onchange is called when user changed input value. So answer is yes, but it will have no effect. I assume you change content programmatically, so add simple code which will call this function

Upvotes: 0

pimvdb
pimvdb

Reputation: 154818

Since you say you're using AJAX, why not execute the function when you update the text. I'm not sure if you use any library, but in case it's jQuery just do:

 $.ajax({ ...,
          success: function() {
               ... other things ...
               ... setting div text ...
               calculateTotal();
          }
       });

Upvotes: 4

user149341
user149341

Reputation:

No; the onchange attribute is only applicable to form field elements (input, select, textarea, etc).

Upvotes: 26

Related Questions