How can I display a new div with text after a user inputs this text and hits submit?

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>

A submit button always submits a form to the server. You have to prevent that default action. See [How to prevent buttons from submitting forms](//stackoverflow.com/q/932653) — Heretic Monkey, Feb 17 '18 at 22:45
Possible duplicate of [How to prevent buttons from submitting forms](https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Heretic Monkey, Feb 17 '18 at 22:46

score 1 · Answer 1 · answered Feb 17 '18 at 22:53

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>

How can I display a new div with text after a user inputs this text and hits submit?

1 Answers1