Function 与表单元素一起工作。我还需要重置按钮，但它只适用于<form>元素</form>

Question

In my program I have 3 functions:在我的程序中，我有 3 个功能：

Amounts must be added together and their total must be shown in.金额必须加在一起，并且必须显示它们的总数。
Second calculates the VAT.其次计算增值税。
The third one resets everything.第三个重置一切。

So the question is: the reset button works only with <form> element.所以问题是：重置按钮仅适用于<form>元素。 But with <form> element I have a bug with reprodusing VAT resultat.但是对于<form>元素，我有一个重现增值税结果的错误。 It apears on 1 second, and disapears.它在 1 秒后出现，然后消失。 I think it have something with reset finction.我认为它具有重置功能。 Please help me to understand.请帮我理解。 If I change on, then VAT button works, but reset button - no!如果我更改，则增值税按钮有效，但重置按钮 - 不！

<HTML>
 <HEAD>
  </HEAD>
    <BODY> 
    <h2>Onderdeel 1</h2>   
    <h2>The Sum Program</h2>   
    <hr/>
     <form id="myForm">
      <button type="button" onclick="check_field('myInput');"value = ''>Enter</button>
      <input id="myInput">
      <p>Uw totaal:</p>
      <input type="number" id="output">
      <button type="button" onclick="check_field('myInput');"value = ''>Enter</button>
      <br>
      <br>
      <br>
      <button onclick="getBTW()">get BTW</button>
      </br>
      <p>Prijs zonder BTW <input id="prijsZonderBTW"> </p>
      <p> Btw <input id="btw"> </p>
      <button onclick="myReset()">reset</button>
    </form>
    <script>
       var input = document.getElementById("myInput");
       var output = document.getElementById("output");
       var total = 0;
     function check_field(id) {
            var field = document.getElementById(id);
            if (isNaN(field.value)) {
                alert('not a number');
            } else {
              return myFunction();
            }
        }
     function myFunction() {
        total += +input.value;
        output.value = total;
        input.value = "";
      }
      function myReset() {
       document.getElementById("myForm").reset();
      }
      function getBTW() {
        var prijs = document.getElementById("myInput").value;
        var prijsZonderBTW = (prijs/121)*100;
        var btw = prijs - prijsZonderBTW;
        document.getElementById("prijsZonderBTW").value = prijsZonderBTW.toFixed(2);
        document.getElementById("btw").value = btw.toFixed(2);
     }
        </script>
    </BODY>
</HTML>

Answer 1

Made a fair amount of tweaks here.在这里做了相当多的调整。 the main ones are: 1) use input type="button" instead of button.主要是：1）使用输入类型=“按钮”而不是按钮。 only 1 button per form and it submits the form so thats what was happening 2) swapped user input to type="number" so that validating it wasnt necessary 3) got rid of global variables, moved them into the function scope that needed them 4) in getBTW use the output.value instead of myInput which gets cleared every time the + button is clicked每个表单只有 1 个按钮，它会提交表单，这就是发生的事情 2）将用户输入交换为 type="number" 以便验证它不是必要的 3）摆脱全局变量，将它们移动到需要它们的 function scope 4 ) 在 getBTW 中使用 output.value 而不是 myInput ，每次单击 + 按钮时都会清除它

Hopefully these tweaks make sense and set you on the right track for where you are headed希望这些调整是有意义的，并让您走上正确的道路

 function myFunction() { const input = document.getElementById("myInput"), output = document.getElementById("output"); let total = +output.value || 0; total += +input.value; output.value = total; input.value = ""; } function getBTW() { var prijs = +document.getElementById("output").value; var prijsZonderBTW = (prijs/121)*100; var btw = prijs - prijsZonderBTW; document.getElementById("prijsZonderBTW").value = prijsZonderBTW.toFixed(2); document.getElementById("btw").value = btw.toFixed(2); } function myReset() { document.getElementById("myForm").reset(); }

 <HTML> <HEAD> </HEAD> <BODY> <h2>Onderdeel 1</h2> <h2>The Sum Program</h2> <hr/> <form id="myForm"> <label>User Entry</label> <input type="number" id="myInput"> <input type="button" value="+" onclick="myFunction()"> <br> <label>Uw totaal:</label> <input type="number" id="output" disabled> <br> <br> <br> <input type="button" onclick="getBTW()" value="get BTW"> </br> <p>Prijs zonder BTW <input type="text" id="prijsZonderBTW" disabled> </p> <p> Btw <input type="text" id="btw" disabled> </p> <input type="button" onclick="myReset()" value="reset"> </form> </BODY> </HTML>

Function 与表单元素一起工作。我还需要重置按钮，但它只适用于<form>元素</form>

问题描述

1 个解决方案

解决方案1
0 2020-01-30 18:17:57

Function 与表单元素一起工作。 我还需要重置按钮，但它只适用于<form>元素</form>

问题描述

1 个解决方案

解决方案1 0 2020-01-30 18:17:57

Function 与表单元素一起工作。我还需要重置按钮，但它只适用于<form>元素</form>

解决方案1
0 2020-01-30 18:17:57