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, Dec 19 '14 at 20:27
@im1dermike Possibly he doesn't want to or he's trying to learn how to do it. — Rob, Dec 19 '14 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 `` 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, Dec 19 '14 at 20:43
@Rob: I saw his reputation and assumed he could be doing it better. — mellis481, Dec 19 '14 at 20:53

Rick Hitchcock · Accepted Answer · 2014-12-19T21:52:10.323

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 '14 at 21:52

answered Dec 19 '14 at 20:35

Rick Hitchcock

35,202
5
48
79

1

Thank you! That is exactly what I was looking for. I knew I was close. :) – user3029953 Dec 19 '14 at 20:58
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. – user3029953 Dec 19 '14 at 21:06
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: ` ` and `` – Rick Hitchcock Dec 19 '14 at 21:26
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 Dec 19 '14 at 21:27
Sorry, I should have added `return false` to `onsubmit` in the first snippet. Now done. The second snippet should also work now that I've moved `preventDefault`. If you continue having problems, let me know what browser you're using. – Rick Hitchcock Dec 19 '14 at 21:31
First snippet now works. Second snippet still does not. I use Chrome. – user3029953 Dec 19 '14 at 21:34
I've tested in Chrome on my local machine, and it's working. Sorry I can't think of what the problem might be. – Rick Hitchcock Dec 19 '14 at 21:38
I tried adding the Javascript into a it does not work. Any ideas on what causes that? – user3029953 Dec 19 '14 at 21:43
Ahh, you should add the code inside the equivalent of a `document ready`. Otherwise, the external JavaScript file will be querying for HTML that doesn't exist yet. I've updated my answer. – Rick Hitchcock Dec 19 '14 at 21:53
1

Works beautifully now. After I was playing around with the – user3029953 Dec 19 '14 at 22:00

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

1 Answers1

Linked