单击按钮

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;">

Stack snippet

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元素

Stack snippet

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>

Answer 2

button的默认类型为submit，导致提交form。将其更改为button：

<button type="button" onclick="CalcVolume()">Calculate</button>

工作代码：

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

    var 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 type="button" onclick="CalcVolume()">Calculate</button>
</form>