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);
}

Why are you creating a new element in JS rather than having the element already defined in HTML and just populating and showing it when desired? — mellis481
– mellis481, Commented Dec 19, 2014 at 20:27
@im1dermike Possibly he doesn't want to or he's trying to learn how to do it. — Rob
– Rob, Commented Dec 19, 2014 at 20:37
Just in case it saves you time later: I'd go for the textarea if multiple lines are a possibility; I don't know of any way to have them in an <input> field. In order to determine whether to line-break, set up a 'keypress' event listener on the textarea, and call evt.preventDefault() if the keycode is enter (13) and the shift key is not pressed. — Katana314
– Katana314, Commented Dec 19, 2014 at 20:43
@Rob: I saw his reputation and assumed he could be doing it better. — mellis481
– mellis481, Commented Dec 19, 2014 at 20:53

Rick Hitchcock · Accepted Answer · 2014-12-19 21:52:10Z

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>

edited Dec 19, 2014 at 21:52

answered Dec 19, 2014 at 20:35

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user3029953 Over a year ago

Thank you! That is exactly what I was looking for. I knew I was close. :)

user3029953 Over a year ago

Hmmm... it works in the snippet. When I try and implement this on my page it does not work. The textarea doesnt submit anything(clicking button or pressing enter... press enter gives new line, clicking button erases all) and the input one flashes the input text to the comments sections quickly then dissapears as if refreshing it.

Rick Hitchcock Over a year ago

I assume you're referring to my second snippet. I've now moved preventDefault to the onsubmit handler. If you're running this in IE, you may need to add these lines: <!DOCTYPE html> and <meta http-equiv="X-UA-Compatible" content="IE=edge">

user3029953 Over a year ago

Both snippets work as intended here. When I implement either snippet on my page it does not work. I have tried erasing everything else on my page and only including the code you provided, still same results. With the first snippet, the result is a quick "flash" of the input to the comments below: section, then the page seemingly refreshes and a "?" is added to the url. With the 2nd snippet, the enter button only adds a new line and when you click submit, it erases the textarea and adds a "?" to the url, no flash of the textarea input into the comments below section. I use Chrome.

user3029953 Over a year ago

Works beautifully now. After I was playing around with the <script> tag I was trying to figure out the JS to listen for the elements to load :p Thank you much!

|

Collectives™ on Stack Overflow

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

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related