JavaScript计算错误

JavaScript Calculating wrong

本文关键字：错误计算 JavaScript 更新时间：2023-09-26

我正在尝试使用JavaScript执行计算。当用户在输入（#page）中输入的页面少于10页时，成本为1。如果他加了10个以上，每一页的费用是.10。有两个复选框选项，如果他点击，则添加第一个复选框10和第二个复选框15。

当按顺序步骤完成时，这是有效的。（输入，然后单击复选框）。

例如：输入为：9（总计：1）单击复选框1-重复项（总数：11）点击复选框1-激光（总数：26）

现在，如果我将Input更改为11，那么总数将变为1.10——即使两个复选框都被选中。。（预期结果应为-26.10）

我不知道该怎么做。。。有人能帮我解决吗

<html>
<head>
    <title>Calculation</title>
    <script>
        function calculate() {
            var pages=document.getElementById("page").value;
            if(pages <=10) {
                total.value=1;
            }
            if(pages >= 11) {
                var extra_pages= pages - 10;
                var new_total= extra_pages * .10;
                var new_total1= 1 + new_total;
                total.value= new_total1; 
            }
        }
        function checkbox1() {
            if(document.getElementById("ckbox1").checked === true) {
                var total1=document.getElementById("total").value;
                const add1 = 10;
                var check1 = +total1 + +add1;
                total.value=check1;
            }
            if(document.getElementById("ckbox1").checked === false) {
                var total1=document.getElementById("total").value;
                 const sub1 = 10;
                 var check2 = +total1 - +sub1;
                 total.value = check2;
            }
        }
        function checkbox2() {
            if(document.getElementById("ckbox2").checked === true) {
                var total1=document.getElementById("total").value;
                const add1 = 15;
                var check1 = +total1 + +add1;
                total.value=check1;  
            }
            if(document.getElementById("ckbox2").checked === false) {
                 var total1=document.getElementById("total").value;
                 const sub1 = 15;
                 var check2 = +total1 - +sub1;
                 total.value = check2;
            }
        }
</script>
<body>
     Enter a Number: <input type="text" id="page" value="1" oninput="calculate()">
    <br>
    <br><br><br><br>
       duplicates <input type="checkbox" id="ckbox1" onclick="checkbox1()">
    laser print: <input type="checkbox" id="ckbox2" onclick="checkbox2()"> <br><br>
    Total: <input type="text" id="total">
</body>
</html>

您可以对所有更改使用calculate，而不是为每个input创建每个更改，这会使计算变得复杂。

// Get reference to inputs.
var page = document.getElementById("page");
var total = document.getElementById("total");
var dup = document.getElementById("ckbox1");
var laser = document.getElementById("ckbox2");
function calculate() {
  // To Number
  var pages = parseInt(page.value, 10);
  var value = 0;
  if (pages <= 10) {
    value = 1;
  } else {
    var extra_pages = pages - 10;
    var new_total = extra_pages * .10;
    var new_total1 = 1 + new_total;
    value = new_total1;
  }
  
  // Add 10 if dup is checked.
  if (dup.checked) {
    value += 10;
  }
  
  // Add 15 if laser is checked.
  // These can be moved out like
  // const laserVal = 15;
  // value += laserVal if you don't want magic number here.
  if (laser.checked) {
    value += 15;
  }
  
  // Truncate float.
  total.value = value.toFixed(1);
}

Enter a Number:
<input type="text" id="page" value="1" oninput="calculate()">
<br>
<br>
<br>
<br>
<br>
duplicates:<input type="checkbox" id="ckbox1" onclick="calculate()">
laser print:<input type="checkbox" id="ckbox2" onclick="calculate()">
<br>
<br>Total:
<input type="text" id="total">