JavaScript計算錯誤

我正在嘗試使用JavaScript執行計算。當用戶在輸入（#page）中輸入少於10頁時，成本爲1，如果他添加超過10頁，則每頁成本爲10。有2個複選框選項，如果他點擊第一個複選框10被添加，第二個複選框15被添加。JavaScript計算錯誤

這是工作時，它是在連續的步驟完成。（輸入然後點擊複選框）。

例：輸入是：9（共：1）點擊checkbox1 - 重複（總計：11）點擊checkbox1 - 激光（共：26）

現在，如果i中的輸入變化到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>

來源

2015-11-30 JavaLearner1

你'calculate'沒有考慮'duplicates'和'激光print'所以他們不會被包括在內。 – fuyushimoya

你還沒有定義total.value – WisdmLabs

你可以全部使用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">

來源

2015-11-30 07:58:14 fuyushimoya

嗨，我試過這個代碼..但這不是爲我工作... – JavaLearner1

打開開發工具，是否有任何東西在控制檯上彈出？什麼是不工作的細節，改變頁面不會改變總數？或點擊複選框將不會得到正確的總數？甚至沒有添加號碼？ – fuyushimoya

你可以在這裏檢查，我複製粘貼的代碼，並嘗試..但當我輸入input..total是空白..當我點擊複選框..總場是空白.. - http://jsfiddle.net/ vikrams/a3khbub1/ – JavaLearner1

JavaScript計算錯誤

回答

相關問題