Question

我需要一个JavaScript函数，该函数可用于获取HTML表单的值，在div容器内创建一个段落，并在每次单击“提交”按钮时将表单值输入到创建的段落中。我尝试的JavaScript代码似乎响应不佳。

注意：我不希望表单返回任何值。

这里是完整的HTML和javascript代码，该按钮一直在向页面提交表单值，而不更新commentBox容器。

 <div class="chat-popup" id="myForm">
    <form name="commentForm" class="form-container">
        <label for="msg"><b>Comment</b></label>
        <textarea id="myComment" placeholder="Type comment.." name="msg" required></textarea>
        <button type="submit" class="lk-btn" onclick="postComment(); return false">Send</button>
        <button class="lk-btn" onclick="closeForm()">Close</button>
    </form>
</div>
</div>

<div id="commentBox" style="width: 400px; height: 400px; background-color: white; color: green;"></div>

    function postComment() {
        var paragraph = document.createElement("p");
        p.id = 'com';

        document.getElementById('com').innerHTML = document.getElementById('myComment').value;

        var commentContainer = document.getElementById('commentBox');
        commentContainer.appendChild(paragraph);

        return false;

      }

Answer 1

创建的p元素引用存储在变量paragraph中。为了分配id属性，请使用paragraph.id而不是p.id。

由于新创建的p尚未附加到文档中。因此，语句document.getElementById('com')将返回null。

document.querySelector('button')
  .addEventListener('click', function() {
    const p = document.createElement('p');
    p.id = "com";

    const val = document.getElementById('myComment').value;
    if (val.length) {
      p.innerHTML = val;
      document.querySelector('div').appendChild(p);
    }

  });

<input type="text" id="myComment">
<div></div>
<button>Click Me</button>

-编辑-

function postComment(e) {
  e.preventDefault();
  const p = document.createElement('p');
  p.id = "com";
  const val = document.getElementById('myComment').value;
  if (val) {
    p.innerHTML = val;
    document.getElementById('commentBox').appendChild(p);
  }
}

<div class="chat-popup" id="myForm">
  <form name="commentForm" class="form-container">
    <label for="msg"><b>Comment</b></label>
    <textarea id="myComment" placeholder="Type comment.." name="msg" required></textarea>
    <button type="submit" class="lk-btn" onclick="postComment(event); return false">Send</button>
    <button class="lk-btn" onclick="closeForm()">Close</button>
  </form>
</div>
<div id="commentBox" style="width: 400px; height: 400px; background-color: white; color: green;"></div>

Answer 2

只需省略整个“ id”，就可以了：

function postComment() {
    var paragraph = document.createElement("p");
    paragraph.innerHTML = document.getElementById('myComment').value;

    var commentContainer = document.getElementById('commentBox');
    commentContainer.appendChild(paragraph);

    return false;
}

<div class="chat-popup" id="myForm">
    <form name="commentForm" class="form-container">
        <label for="msg"><b>Comment</b></label>
        <textarea id="myComment" placeholder="Type comment.." name="msg" required></textarea>
        <button type="submit" class="lk-btn" onclick="postComment(); return false">Send</button>
        <button class="lk-btn" onclick="closeForm()">Close</button>
    </form>
</div>
</div>

<div id="commentBox" style="width: 400px; height: 400px; background-color: white; color: green;"></div>

Answer 3

我最终使用p5.js库更轻松地做到了这一点。只需调用函数CreateP（）就可以了。

HTML提交按钮可在div内创建一个段落元素，并将该表单的值赋给该段落

3 个答案: