Question

我正在创建一个评论部分，但是有一个问题：当你点击帖子时如何将输入值设为空白？

<input type="text" value="" id="stuffed" />
<button onclick="post()">Post</button>

<script>
  function post(){
    var x = document.getElementById("stuffed").value;
    document.getElementById("paragraph").innerHTML = "&lt;me&gt; " + x;
  }
</script>
<p style="color: #ffffff;" id="paragraph"></p>

所以发布评论（我以后会用css来装饰它），但是它说的是评论＆＃39;仍然有之前发表的评论。如何将其值返回空白？

Answer 1

只需添加以下行：

document.getElementById("stuffed").value = "";

这是您的代码片段：

＆＃13;

function post(){
  var x=document.getElementById("stuffed").value;
  document.getElementById("paragraph").innerHTML="&lt;me&gt; " + x;
  document.getElementById("stuffed").value = "";
}

＆＃13;

<input type="text" aria-label="Comments" placeholder="Comments" value="" style="padding:10px 50px 10px 5px" id="stuffed"></input><button onclick="post()" style="text-decoration: none; color: #ffffff; background-color: #5dbbd4; padding: 12px 10px 12px 10px; border-width: 0px;">Post</button>

<p style="color: #ffffff;" id="paragraph"></p>

＆＃13;

Answer 2

好吧，只需指定一个空值：

document.getElementById("stuffed").value = ''

＆＃13;

function post() {
  var x = document.getElementById("stuffed").value;
  document.getElementById("paragraph").innerHTML += "<br>&lt;me&gt; " + x;
  
  document.getElementById("stuffed").value = ''
}

＆＃13;

<input type="text" aria-label="Comments" placeholder="Comments" value="" style="padding:10px 50px 10px 5px" id="stuffed"></input><button onclick="post()" style="text-decoration: none; color: #ffffff; background-color: #5dbbd4; padding: 12px 10px 12px 10px; border-width: 0px;">Post</button>


<p style="color: #000;" id="paragraph"></p>

＆＃13;

采用函数addEventListener将事件绑定到元素。

＆＃13;

document.getElementById('postbtn').addEventListener('click', post);

function post() {
  var input = document.getElementById("stuffed");
  var x = input.value;
  document.getElementById("paragraph").innerHTML += "<br>&lt;me&gt; " + x;

  input.value = '';
  input.focus();
}

＆＃13;

<input type="text" aria-label="Comments" placeholder="Comments" value="" style="padding:10px 50px 10px 5px" id="stuffed"></input><button id="postbtn" style="text-decoration: none; color: #ffffff; background-color: #5dbbd4; padding: 12px 10px 12px 10px; border-width: 0px;">Post</button>


<p style="color: #000;" id="paragraph"></p>

＆＃13;

Answer 3

你必须将它的价值重新设定为你想要的价值。在你的情况下，它没有任何意义：

document.getElementById（＆＃34; mytext＆＃34;）。value =＆＃34;我的价值＆＃34 ;;

确保在完成数据后执行此操作。

单击按钮时如何将输入值设为空白？

3 个答案: