Question

我试图使用纯JS来模拟聊天消息系统（虽然没有服务器，所以真的只是上传和显示文本），但我遇到了麻烦，因为我对JavaScript很陌生。我写了这段代码但是当我点击提交时没有任何反应。我的代码在任何我没有捕获的地方都有很大的错误吗？如果是这样，我该如何解决？

我正在尝试使用javascript函数在类容器下生成一个div，父div为chatMsg。

<div id="chatMsg" class = "chatMsg" >
    <div class="container">

    //some other HTML here

    </div>

</div>

<div class = "sendText">
    <form name = "sendMsg">
        <textarea name="Message" class="msg" ></textarea>
        <input type="submit" name = "submit" value="Send!" onclick = "addChatMessage()">
    </form>
</div>

<script>
    function addChatMessage() {
        var chat = document.getElementById('Message'); // finds the container
        var div = document.createElement('div');
            div.id = "newMsg";
            div.className = "container";
            div.innerHTML = chat.value;
        var parDiv = document.getElementById('chatMsg');
        parDiv.appendChild(div);
    }
</script>

Answer 1

一些事情......

1）您需要为textarea提供id属性：

<textarea id="Message" name="Message" class="msg" ></textarea>

现在，您可以使用document.getElementById('Message')来获取它。

2）您应该创建具有唯一ID的新元素。可以使用计数器变量每次将id增加1：

var counter = 0;
div.id = "newMsg" + counter++;
div.className = "container";
div.innerHTML = chat.value;

3）如果您不希望将其发布到服务器，请使用输入类型button而不是submit。

<input type="button" id="submit" value="Send!" onclick = "addChatMessage()">

全部放在一起：

var counter = 0;
function addChatMessage() {
    var chat = document.getElementById('Message'); // finds the container
    var div = document.createElement('div');
        div.id = "newMsg" + counter++;
        div.className = "container";
        div.innerHTML = chat.value;
    var submitMsg = document.getElementById('submit');
    var parDiv = document.getElementById('chatMsg');
        parDiv.appendChild(div);
}

<div id="chatMsg" class = "chatMsg" >
    <div class="container">
        //some other HTML here
    </div>
</div>

<div class = "sendText">
    <form name = "sendMsg">
        <textarea id="Message" name="Message" class="msg" ></textarea>
        <input type="button" id="submit" value="Send!" onclick = "addChatMessage()">
    </form>
</div>

在用户输入此文本并点击提交后，如何显示带文本的新div？

1 个答案: