javascript - 按钮功能 onclick 不显示在文本字段中

Question

我正在编写一段代码，在单击按钮提交时在文本字段中显示内容，但下面的代码不起作用

<script>

  function myFunction() { 
  var x = document.getElementById("cost").value;
       if (document.getElementById("cost").value;) {
        var netprofit = x-(16/100*x);
        document.getElementById("net").value =  +netprofit;
        else if (document.getElementById("cost").value;) {

         var commission = netprofit * 35/100;
        document.getElementById("comm").value =  +commission;
        }
}
}
</script>

<form action="" method="POST">
<input type="text" id="cost" placeholder="kindly enter the cost value of project"><br><br>
<input type="text" name="" id="net" readonly="readonly"><br><br>
<input type="text" name="" id="comm" readonly="readonly"><br><br>
<input type="submit" value="Calculate" onclick="myFunction()">
</form>

我希望结果显示在单击按钮的输入文本中

Answer 1

正如 Harpel 指出的那样，您必须阻止表单提交。这是包含 submit 类型输入的表单的默认行为。我还建议稍微重新组织您的代码(您选择的每个输入的变量等)。类似于下面的内容:

<script>
function myFunction(event) { 
  event.preventDefault();
  var costInput = document.getElementById("cost");
  var netInput = document.getElementById("net");
  var commInput = document.getElementById("comm");

  if (costInput.value) {
    var netprofit = costInput.value - (16/100 * costInput.value);
    netInput.value = netprofit;
  } else if (costInput.value) {
    var commission = netprofit * 35/100;
    commInput.value = commission;
  }
}
</script>

<form action="" method="POST">
  <input type="text" id="cost" placeholder="kindly enter the cost value of project"><br><br>
  <input type="text" name="" id="net" readonly="readonly"><br><br>
  <input type="text" name="" id="comm" readonly="readonly"><br><br>
  <input type="submit" value="Calculate" onclick="myFunction(event)">
</form>

还有一件事；我不确定 if 语句应该检查什么，因为它似乎检查相同的条件。如果是这种情况，您可以将输入值的两项计算放入一个 if 检查中，如下所示:

if (costInput.value) {
  var netprofit = costInput.value - (16/100 * costInput.value);
  netInput.value = netprofit;

  var commission = netprofit * 35/100;
  commInput.value = commission;
}