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

Question

I'm trying to simulate a chat messaging system using pure JS (no server though, so really just uploading and displaying text) but am having trouble as I'm pretty new to JavaScript. I wrote this code but nothing happens when I click submit. Is my code having a huge error anywhere that I am not catching? If so, how can I fix it?

I am trying to use the javascript function to generate a div under the class container, with parent 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

A few things...

1) You need to give the textarea an id attribute:

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

Now, you can use document.getElementById('Message') to get it.

2) You should create new elements with unique ids. A counter variable could be used to increase the id by one each time:

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

3) Use an input type of button instead of submit if you don't want it to post to a server.

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

---

Putting it all together:

 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>