javascript - 提交时重置/清除 div 的先前(用户输入)内容

Question

(我被要求只使用 Javascript。我知道我可以使用 jQuery 或其他东西来做到这一点。)

所以，我有一个用于输入内容的文本字段和一个在 div 内打印它们的提交按钮。我希望一次只有一项提交的内容在 div 中可见(目前，之前提交的内容也会显示)。

我想我应该使用 document.getElementById("leftblock").reset(); 来执行此操作，但我无法让它工作。要么我不应该使用它，要么我找不到放置它的正确位置。关于如何让它发挥作用有什么想法吗？

我当前代码的(简化)版本:

JS:

function myFunction() {
  var x = document.getElementById("myText").value;
  if ( -- no need to include this -- ) {
    document.getElementById("leftblock").innerHTML = "asdfghjkl"

HTML:

<input type="text" id="myText" value="">

<button onclick="myFunction()" id="myButton">Submit</button>

  <div class="mydiv">
    <p id="leftblock"></p>
  </div>

感谢您提前抽出时间。

Answer 1

您可以重写 <p>与当前文本字段值:

<input type="text" id="myText" value="">
<button onclick="myFunction()" id="myButton">Submit</button>
<div class="mydiv">
  <p id="leftblock"></p>
</div>

JS:

function myFunction() {
  var x = document.getElementById("myText").value;
  document.getElementById("leftblock").innerText = x;
}

fiddle : https://jsfiddle.net/jmo9t8d2/2/