将变量分配给更改 div

Question

我有一个显示用户发送消息的 div (<div id="messages"></div>)。我正在尝试将变量“msg”分配给 div 中消息的值，但不幸的是，“msg”没有注册添加到 div 的新消息的值。

因此，每次我在控制台中输入“msg”时，它都会返回“未定义”，即使 div 中有一条消息。

这是我目前所拥有的

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

这是消息模板

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

有什么建议吗？

问题是当页面加载并且我将消息发送到消息 div 然后在我的控制台中输入“msg”时，我收到“未定义”，因为变量尚未注册消息 div 具有更改/更新。所以基本上我正在寻找一种方法，让 javascript 在添加新的 .message 时将 var msg 分配给 #messages 以重新加载/更新。

Answer 1

检查此fiddle。你说：

我正在尝试将变量“msg”分配给消息的值 div 但不幸的是'msg'没有注册的值 新消息添加到 div。

因此，在小提琴中，我创建了一个消息模拟，并使用来自 jQuery 的triggerHandler 将消息分配给变量msg，当新消息到达时。你可以在这里阅读更多关于triggerHandler的信息：http://api.jquery.com/triggerHandler

代码：

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);
});

Answer 2

您将类名的 div 声明为“消息”，并尝试通过 getElementById() 方法访问 DOM 元素，这是不可能的。所以将 Div 类属性更改为 id 并像这样更改 getElementById 中的参数。

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

这是消息模板

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

参考这个方法 - http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

Answer 3

所以你有一个错字。 Class = message 并且在函数中它的消息！ 但如果这不能解决它，请尝试以下（jquery）：

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