HTML on change not working

Question

I have my HTML block as:

 <p onchange="changed(this.value)"><span id="output" style="font-weight: bold" ></span></p>

My function changed(str) is :

function changed(str)
{
    console.log("inside changed!!")
}

and I am changing the value of p in the javascript by the following statement:

document.getElementById("output").innerHTML="You are the first user, waiting for User 2....";

The problem is I see the value of my block changing but I can see in the console that the control never gets in my function changed().

I have tried moving the onchange="changed(this.value)" to inside span. But I still don't get the message from the function in the console

@rahulmr its a DOM element so it should work. There is no reason why it shouldn't — , Oct 24 '17 at 11:55
@ProEvilz yes my requirement is met only by the onchange property — , Oct 24 '17 at 11:56
_"The change event is fired for **, ** elements "_ - [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/change) — Turnip, Oct 24 '17 at 11:57
Does `.value` work for 'p' tag? I believe @rahulmr is correct - onchange applies to input fields only. — Jay Buckman, Oct 24 '17 at 11:58

score 1 · Answer 1 · answered Oct 24 '17 at 11:56

1

Try

input type="text" instead of p tag. After typing text inside the input field. click outside, after that text consoled

answered Oct 24 '17 at 11:56

Saravana priyan S

429
3
9

Tiramonium · Answer 2 · 2017-10-24T14:36:32.630

It won't work because what is actually changing is the <span> tag, not the <p> one. Move the onchange event caller to the span tag.

EDIT You led me to believe in your question that your "innerHTML" statement was actually working, that's why the mistaken answer. You also never mentioned when this event is supposed to happen, so I'm assuming it's expected to happen as soon as the page finishes loading, otherwise, write your event caller later.

Also, drop the onchange event caller entirely and just put the console.log logic inside your event function, so both will happen in sequence.

document.addEventListener("DOMContentLoaded", function(){
  var valueText = "You are the first user, waiting for User 2....";
  document.getElementById("output").innerHTML=valueText;
  console.log("Inside changed!! " + valueText);
});

<p><span id="output" style="font-weight: bold;"></span></p>

@RogerC take points off the question poster then instead of me, since he led me to believe he had his function working. "The problem is I see the value of my block changing..." — Tiramonium, Oct 24 '17 at 14:38

score 0 · Answer 3 · answered Oct 24 '17 at 12:07

The change event is used to catch the user change inputs. It's not your case here.

Try to use DOMSubtreeModified event instead.

document.getElementById("changeElem").addEventListener('DOMSubtreeModified', function(event){
  console.log("inside changed!!");
});
setTimeout(function(){
  document.getElementById("output").innerHTML="After change";
}, 1000);

<p id="changeElem"><span id="output" style="font-weight: bold" >Before change</span></p>

score 0 · Answer 4 · answered Oct 24 '17 at 12:07

The onchange won't be fired by paragraph element, I believe you are looking for Mutation Observer.

You also can take a look in the questions below, maybe help.

How to use MutationObserver?

Mutation Observer Not Detecting Text Change

Detect paragraph element change with JQuery

Guillaume Georges · Answer 5 · 2017-10-24T12:15:42.427

You're trying to react to a change of an element's content. A change event won't be fired if you modify the content of a p element using JavaScript.

You could obtain the desired behaviour using Mutation Obervers :

// select the target node
var target = document.getElementById('output');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {

  mutations.forEach(function(mutation) {
    changed();
  });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);

// changing the target node's content
target.innerHTML = "You are the first user, waiting for User 2...."; 
 
function changed(str)
{
    console.log("inside changed!!")
}

// later, you can stop observing
// observer.disconnect();

<p><span id="output" style="font-weight: bold;"></span></p>

score 0 · Answer 6 · answered Oct 24 '17 at 12:51

If you want to listen to all changes in the "p" element then you can use DOMSubtreeModified

Please be very careful with this event it is easy to cause an infinite loop if you decide to change the DOM inside the event handler.

try the below code

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
 <body>
 <p id="p"><span id="output" style="font-weight: bold" ></span></p>
</body>
<script>
   $( "#p" ).on('DOMSubtreeModified', function () {
  console.log(this);
});  
document.getElementById("output").innerHTML="You are the first user, waiting for User 2....";
</script>
</body>
</html>

score 0 · Answer 7 · answered Oct 24 '17 at 13:03

0

The supported html tags for onchange are <textarea>, <input> and <select>. For more details refer to:

MDN: https://developer.mozilla.org/en-US/docs/Web/Events/change

W3School: https://www.w3schools.com/tags/ev_onchange.asp

answered Oct 24 '17 at 13:03

Karan Dhir

731
1
6
24

score -1 · Accepted Answer · edited Oct 24 '17 at 12:14

-1

<P> not support onchange event that's why this is not working.

Supported HTML tags by onchange : checkbox, color, date, datetime, email, file, month, number, password, radio, range, search, tel, text, time, url, week, select and textarea.

refer this link

edited Oct 24 '17 at 12:14

Harsh Patel

6,334
10
40
73

answered Oct 24 '17 at 11:57

KP Pankhaniya

40
4

The fact the target element is
is not relevant here. OP is changing the element via JavaScript. The change event is only fired when the user changes the element. Try using OP's code with an input tag, it won't work either.
– Guillaume Georges Oct 24 '17 at 12:23

HTML on change not working

8 Answers8