2

I have a div which displays messages sent by users (<div id="messages"></div>). I'm trying to assign a variable 'msg' to the value of the messages in the div but unfortunately the 'msg' doesn't register the value of the new messages added to the div.

As a result, every time I type 'msg' into my console it gives me back "undefined" even though there is a message in the div.

This is what I have so far

var msg;
document.getElementById("#messages").onchange = function () {
    msg = this.textContent;
    // I soon found out that this code only works for <inputs> and not <div>
}

Here is the message template

<div class="message"> + message.body + </div>

Any suggestions?

The problem is that when the page loads and I send a message into the messages div and then enter 'msg' in my console, I receive "undefined" because the variable hasn't registered that the messages div has changed/updated. So basically I'm looking for a way for the javascript assigning var msg to #messages to reload/update when a new .message is added.

KingAlfredChameleon
  • 407
  • 6
  • 18
  • possible duplicate of [Detect element content changes with jQuery](http://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery) – waldek_h Feb 07 '15 at 10:43

3 Answers3

2

Check this fiddle. You said:

I'm trying to assign a variable 'msg' to the value of the messages in the div but unfortunately the 'msg' doesn't register the value of the new messages added to the div.

So in the fiddle, I created a message simulation and used the triggerHandler from jQuery to assign the message to the variable, msg when a new message arrives. You can read more about triggerHandler here: http://api.jquery.com/triggerHandler

Code:

setTimeout(function () { // Simulating a new message after 2 seconds
    $('#message').html("I am a new message!!!").triggerHandler('newMsg');
}, 2000);

var msg;

$('#message').on('newMsg', function () {

    msg = $(this).html();
    alert("NEW MESSAGE: " + msg);
});
Preetesh
  • 524
  • 8
  • 19
  • I have a question, when alert comes up, it shows the message along with its accompanying div like so, `
    hi my name is tomy
    ` is there a way I can just get the text content only? Thanks     – KingAlfredChameleon Feb 07 '15 at 12:07
  • 1
    That is because the value of `msg` is equal to `html()` of `#message`. Select only that `div` which actually contains the message. You can try: `msg = $('.message').html();`. This will return "_hi my name is tomy_". – Preetesh Feb 07 '15 at 12:13
0

You declared div with class name as 'message' and trying to access the DOM element by getElementById() method it's not possible. so change the Div class attribute into id and change the parameter in getElementById like this.

var msg;
document.getElementById("message").onchange = function () {
    msg = this.textContent;
    // I soon found out that this code only works for <inputs> and not <div>
}

Here is the message template

<div id="message"> + message.body + </div>

Refer about this Method - http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

Bala.Raj
  • 1,011
  • 9
  • 18
0

So you have a typo. Class = message and in the function its messages ! But if that doesn't solve it try following (jquery): 

var msg;
$( "#messages" ).change(function() {
   msg = this.text(); 
});
valentin
  • 86
  • 6