javascript - 如何只重置文本框，而不是整个页面？

Question

我正在尝试创建一个发布/评论系统。它完成了我想要的大部分工作。现在，我只想重置文本框，而不是整个页面。骨架代码由CodePen预设。 (更多解释代码示例)

HTML:

<form id="frmPost" name="write">
    <div class="textbox">
        <input class="postwriter" name="post" type="text" placeholder="What's on your mind?" id="txtPost">
        <button id="btnPost" onclick= "return write_below(this); resetText();" value="submit" >Post</button>
    </div>
</form>
<div class="posts" id="postDisplay">
    <p class="para"><span id='display'></span></p>
</div>

JS:

function resetText() {
    document.getElementById('txtPost').value="";
    //return false;
}
function write_below(form){
    var input = document.forms.write.post.value;
    //document.getElementById('display').innerHTML += input + "<br/>" + "<br/>";
    document.getElementById('display').innerHTML += "<p>" + Math.floor(Math.random()*20) + ": " + input + "</p>" + "<br/>";
    return false;
}

像这样，帖子被保留但文本框被重置。如果我删除/注释掉第二个 return false; 整个页面将重置。

Answer 1

您所要做的就是从write_below()调用resetText()

function resetText() {
    document.getElementById('txtPost').value="";
}
function write_below(form){
  var input = document.forms.write.post.value;   
  document.getElementById('display').innerHTML += "<p>" + Math.floor(Math.random()*20) + ": " + input + "</p>" + "<br/>";
  resetText();
  return false;
}

<form id="frmPost" name="write">
  <div class="textbox">
    <input class="postwriter" name="post" type="text" placeholder="What's on your mind?" id="txtPost">
    <button id="btnPost" onclick= "return write_below(this);" value="submit" >Post</button>
  </div>
</form>
<div class="posts" id="postDisplay">
  <p class="para"><span id='display'></span></p>
</div>