javascript - 单击按钮时会清除文本字段中的内容

Question

function CalcVolume() {
  var radiusvalue = document.getElementById("radius").value
  if (radiusvalue) {
    if (isNaN(radiusvalue)) {
      alert("Provide a number")
      return;
    }

    volumevalue = 4 * 3.14 * radiusvalue * radiusvalue * radiusvalue
    document.getElementById("volume").value = volumevalue;

  } else {
    alert("Provide an input")
  }
}

form {
  border: 2px solid black;
  padding-left: 15px;
  height: 170px;
  width: 200px;
}

<form>
  <p>
    Radius<br>
    <input type="text" id="radius">
  </p>
  <p>
    Volume<br>
    <input type="text" id="volume">
  </p>
  <button onclick="CalcVolume()">Calculate</button>
</form>

在上面的代码段中，这是一个带有 UI 的小逻辑，用于计算给定半径的体积，单击带有文本“计算”的按钮时会自动清除文本字段。有人可以帮助我理解这一点吗？

Answer 1

form已提交。

您可以添加onsubmit="return false;"至<form onsubmit="return false;">

堆栈片段

function CalcVolume() {
  var radiusvalue = document.getElementById("radius").value
  if (radiusvalue) {
    if (isNaN(radiusvalue)) {
      alert("Provide a number")
      return;
    }

    volumevalue = 4 * 3.14 * radiusvalue * radiusvalue * radiusvalue
    document.getElementById("volume").value = volumevalue;

  } else {
    alert("Provide an input")
  }
}

form {
  border: 2px solid black;
  padding-left: 15px;
  height: 170px;
  width: 200px;
}

<form onsubmit="return false;">
  <p>
    Radius<br>
    <input type="text" id="radius">
  </p>
  <p>
    Volume<br>
    <input type="text" id="volume">
  </p>
  <button onclick="CalcVolume()">Calculate</button>
</form>

<小时/>

或者替换 form带有 div 的元素

堆栈片段

function CalcVolume() {
  var radiusvalue = document.getElementById("radius").value
  if (radiusvalue) {
    if (isNaN(radiusvalue)) {
      alert("Provide a number")
      return;
    }

    volumevalue = 4 * 3.14 * radiusvalue * radiusvalue * radiusvalue
    document.getElementById("volume").value = volumevalue;

  } else {
    alert("Provide an input")
  }
}

.myform {
  border: 2px solid black;
  padding-left: 15px;
  height: 170px;
  width: 200px;
}

<div class="myform">
  <p>
    Radius<br>
    <input type="text" id="radius">
  </p>
  <p>
    Volume<br>
    <input type="text" id="volume">
  </p>
  <button onclick="CalcVolume()">Calculate</button>
</div>