Question

我目前有一些HTML和Javascript，我正在尝试制作评论部分。

基本上，我想要完成的是一个带有textarea的表单（首选，当你按下enter提交，shift +输入新行）或输入type = text来提交文本框中的任何内容表格下面的一个段落（或div，甚至是另一个textarea）。

| ______你好__________ | ＆lt; - Textbox

下面的评论：

按Enter键

| ________________ | ＆lt; - 文本框

下面的评论：

您好

这是我到目前为止的代码，但它不起作用：

<!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

你很亲密：

将onsubmit处理程序移动到表单元素。
getElementsByTagName返回一个集合。要获取输入的值，请使用inputs[0].value。

<强>段

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>

以下是如何使用textarea执行此操作，使用 Enter 和 Shift + Enter 条件：

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>

如何使用HTML和Javascript向网页添加元素？

1 个答案: