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

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 加一:

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>