Question

I'm making a posting system that when the user types in a message, it creates a few elements and puts it below the "robot" chat message. If the user inputs two different messages, the latest input message goes above the other user message. I want them to go from top to bottom in chronological order.

This doesn't seem to work: (the if/else part)

function submitUserMessage(){

    var message = document.getElementById("user-input");

    if(message.value){

        // YOU
        var you = document.createElement("h4");
        var youText = document.createTextNode("You");
        you.appendChild(youText);
        you.className = "ytitle";
        document.body.appendChild(you);
        insertAfter(robotSays, you);

        // User's message
        var userMessage = document.createElement("span");
        var userMessageText = document.createTextNode(message.value);
        userMessage.appendChild(userMessageText);
        userMessage.className = "umsg";
        document.body.appendChild(userMessage);
        insertAfter(you, userMessage);
    } else if(userMessage){
        userMessage.nextSibling.insertAfter(this);
    }
}  

Here's a fiddle of my post system :: http://jsfiddle.net/MatthewKosloski/YWWMW/

(Use the enter key to submit)

Was it helpful?

Solution

var userMessage = robotSays;

function submitUserMessage(){

    var message = document.getElementById("user-input");

    if(message.value){

        // YOU
        var you = document.createElement("h4");
        var youText = document.createTextNode("You");
        you.appendChild(youText);
        you.className = "ytitle";
        document.body.appendChild(you);
        insertAfter(userMessage, you);

        // User's message
        userMessage = document.createElement("span");
        var userMessageText = document.createTextNode(message.value);
        userMessage.appendChild(userMessageText);
        userMessage.className = "umsg";
        document.body.appendChild(userMessage);
        insertAfter(you, userMessage);
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top