How do I use HTML and Javascript to add elements to a webpage?

Question

I currently have some HTML and Javascript I'm using to try and make a comment section.

Basically, what I want to accomplish is to have a form with either a textarea (preferred, and when you press enter it submits, shift+enter new line) or an input type=text to submit whatever is in the textbox to a paragraph (or div, or even another textarea) underneath the form.

|______Hello__________| <- Textbox

Comments Below:

Press Enter

|________________| <- Text box

Comments Below:

Hello

Here is the code i have so far but its not working:

<!DOCTYPE html>
<html>

<head>

    <title>Comments Test</title>
    <link href="mainstyles.css" rel="stylesheet" />
    <script src="mainjs.js"></script>

</head>

<body>

    <form>
        <input type="text" onsubmit="postComment(this)" />
        <p>
            Comments Below:
        </p>
    </form>




</body>

</html>

function postComment(input) {
    //Variable for the form
    var form = input.parentElement;
    //Variable for text input
    var inputs = form.getElementsByTagName("input");
    //Variable for the value of the form and if condition met "then" do this if true "else" this if false
    var response = inputs;
    //Variables for creating a paragraph element and text per response
    var node = document.createElement("p"),
        textNode = document.createTextNode(response);

    //Adding the response text to the paragraph and appending that to the bottom of the form
    node.appendChild(textNode);
    form.appendChild(node);
}

Answer 1

You're close:

Move the onsubmit handler to the form element.
getElementsByTagName returns a collection. To get the value of the input, use inputs[0].value .

Snippet

 function postComment(input) { //Variable for the form var form = input.parentElement; //Variable for text input var inputs = form.getElementsByTagName("input"); //Variable for the value of the form and if condition met "then" do this if true "else" this if false var response = inputs[0].value; //Variables for creating a paragraph element and text per response var node = document.createElement("p"), textNode = document.createTextNode(response); //Adding the response text to the paragraph and appending that to the bottom of the form node.appendChild(textNode); form.appendChild(node); }

 <form onsubmit="postComment(this); return false;"> <input type="text"> <p> Comments Below: </p> </form>

Here's how to do this with a textarea, using your Enter and Shift + Enter criteria:

 document.addEventListener("DOMContentLoaded", function(event) { var form= document.querySelector('form'); var textarea= document.querySelector('textarea'); textarea.onkeypress= function(e) { if(e.which === 13 && !e.shiftKey) { this.parentNode.onsubmit(e); } } form.onsubmit= function(e) { var textarea = form.querySelector('textarea'); var response = textarea.value; var node = document.createElement('div'); node.innerHTML= response.replace(/\\n/g,'<br>') + '<hr>'; form.appendChild(node); textarea.value= ''; e.preventDefault(); } });

 textarea { width: 50%; height: 5em; float: left; } p { clear: both; }

 <form> <textarea></textarea> <input type="submit"> <p> Comments Below: </p> </form>

How do I use HTML and Javascript to add elements to a webpage?

Question

1 answers

solution1
1 ACCPTED 2014-12-19 20:35:21

How do I use HTML and Javascript to add elements to a webpage?

Question

1 answers

solution1 1 ACCPTED 2014-12-19 20:35:21

solution1
1 ACCPTED 2014-12-19 20:35:21