Question

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

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

Ex：输入为：9（总计：1） click checkbox1 - 重复（总计：11）单击复选框1 - 激光（总计：26）

现在，如果我将输入更改为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>

Answer 1

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

＆＃13;

// 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);
}

＆＃13;

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

＆＃13;

JavaScript计算错误

1 个答案: