0

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

Improve this question
6
  • 2
    Does onchange property works for 'p' tag? Commented Oct 24, 2017 at 11:54
  • does this have to use onchange? Commented Oct 24, 2017 at 11:55
  • @rahulmr its a DOM element so it should work. There is no reason why it shouldn't Commented Oct 24, 2017 at 11:55
  • @ProEvilz yes my requirement is met only by the onchange property Commented Oct 24, 2017 at 11:56
  • 3
    "The change event is fired for <input>, <select>, and <textarea> elements " - MDN Commented Oct 24, 2017 at 11:57

8 Answers 8

Reset to default
1

Try

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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>

Improve this answer

Comments

0

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>
Improve this answer

Comments

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

Improve this answer

Comments

0

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>

Improve this answer

1 Comment

@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..."
-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

Improve this answer

1 Comment

The fact the target element is <p> 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.