入力ボックス間の計算

Question

私は2つの計算の合計を取得し、合計の見積もりを求める必要があるスクリプトを書いています。問題は、それらを一緒に追加するようになると、私はそれらを働かせることができないということです。私は初心者で、コードは完全には最適化されていないかもしれないことに気をつけてください。しかし、あなたがそのポイントを得ることができると確信しています。コードの改善は歓迎する以上のものです。それは（主に）私の作品

<div> 
     <fieldset> 
      <legend>Printing</legend> 
     Number of color pages:<input type="text" id="color" placeholder="Color Pages" onchange="printing();" onchange = "binding();" /> 
     <input type="text" id="colorprice" readonly="readonly" /><br /> 
     Number of black and white pages:<input type="text" id="black" placeholder="Black and White Pages" onchange="printing();" onchange = "binding();" /> 
     <input type="text" id="blackprice" readonly="readyonly" /><br /> 
     Total Pages:<input type="text" id="pages_total" readonly="readonly" /> <input type="text" id="sum_pages" readonly="readonly" onchange = "suming();"/> 
     </fieldset> 

    </div> 

<div> 
     <fieldset> 
      <legend>Binding</legend> 
      Number of Hardbooks: <input type="text" id="books" placeholder="Number of Hardbooks" onchange="binding();" /> 
      <input type="text" id="books_price" readonly="readonly" /><br /> 
      Number of Softbacks: <input type="text" id="softback" placeholder="Number of Softbacks" onchange="binding();" /> 
      <input type="text" id="soft_price" readonly="readonly" /><br /> 
      Total Bindings: <input type="text" id="total_bindings" readonly="readonly" /><input type "text" id="total_price" readonly="readonly" /> 
     </fieldset> 
    </div> 

<p>Final quote:<input type="text" readonly="readonly" id="quote" /></p> 

function printing() { 
       var blackPrice; 
       var colorPrice; 
       var printBlack = new Array(0.10, 0.08, 0.06, 0.05); 
       var printColor = new Array(0.40, 0.35, 0.30, 0.25); 


       var colorPages = parseInt(document.getElementById("color").value); 
       var blackPages = parseInt(document.getElementById("black").value); 

       if (colorPages < 11) { 
       colorPrice = colorPages * printColor[0]; 
        } 
       else if (colorPages >= 11 && colorPages < 51){ 
       colorPrice = colorPages * printColor[1]; 
        } 
       else if (colorPages >= 51 && colorPages < 101){ 
        colorPrice = colorPages * printColor[2]; 
        } 
       else { 
        colorPrice = colorPages * printColor[3]; 
        } 



       if (blackPages < 11) { 
       blackPrice = blackPages * printBlack[0]; 
        } 
       else if (blackPages >= 11 && colorPages < 51){ 
       blackPrice = blackPages * printBlack[1]; 
        } 
       else if (blackPages >= 51 && colorPages < 101){ 
       blackPrice = blackPages * printBlack[2]; 
        } 
       else { 
       blackPrice = blackPages * printBlack[3]; 
        } 

       var pagesTotal = colorPages + blackPages; 

       var printSum = blackPrice + colorPrice; 


       document.getElementById("colorprice").value = "$" + colorPrice.toFixed(2); 
       document.getElementById("blackprice").value = "$" + blackPrice.toFixed(2); 
       document.getElementById("sum_pages").value = "$" + printSum.toFixed(2); 
       document.getElementById("pages_total").value = pagesTotal; 

       return printSum; 

} 



function binding(){ 

var softbackPrice; 
var hardbookPrice; 
var hardBooks = new Array(37.50, 23.50); 
var softBacks = new Array(3.75, 4.00, 4.25, 4.50, 4.75, 5.00, 5.25); 
var noBooks = parseInt(document.getElementById("books").value); 
var noSoftBacks = parseInt(document.getElementById("softback").value); 
var colorPages = parseInt(document.getElementById("color").value); 
var blackPages = parseInt(document.getElementById("black").value); 
var totalPages = colorPages + blackPages; 

if (noBooks == 1) { 
    hardbookPrice = hardBooks[0]; 
    } 
else { 
     hardbookPrice = (hardBooks[1] * (noBooks - 1)) + hardBooks[0]; 
    } 

if (totalPages <= 50) { 
    softbackPrice = softBacks[0] * noSoftBacks; 
    } 
else if (totalPages > 50 && totalPages <= 100) { 
    softbackPrice = softBacks[1] * noSoftBacks; 
    } 
else if (totalPages > 100 && totalPages <= 150) { 
    softbackPrice = softBacks[1] * noSoftBacks; 
    } 
else if (totalPages > 150 && totalPages <=200) { 
    softbackPrice = softBacks[2] * noSoftBacks; 
    } 
else if (totalPages > 200 && totalPages <= 250) { 
    softbackPrice = softBacks[3] * noSoftBacks; 
    } 
else if (totalPages > 250 && totalPages <= 300) { 
    softbackPrice = softBacks[4] * noSoftBacks; 
    } 
else if (totalPages > 300 && totalPages <= 350) { 
    softbackPrice = softBacks[5] * noSoftBacks; 
    } 
else { 
    softbackPrice = softBacks[6] * noSoftBacks; 
} 



var totalPrice = softbackPrice + hardbookPrice; 
var bindingsTotal = noSoftBacks + noBooks; 


document.getElementById("books_price").value = "$" + hardbookPrice.toFixed(2); 
document.getElementById("soft_price").value = "$" + softbackPrice.toFixed(2); 
document.getElementById("total_bindings").value = bindingsTotal; 
document.getElementById("total_price").value = "$" + totalPrice.toFixed(2); 


return totalPrice; 

} 

function totalSum() { 
var totalPrinting = printing(); 
var totalBinding = binding(); 
var subtotal = totalPrinting + totalBinding; 
document.getElementIdBy("quote").value = subtotal; 
} 

Answer 1

は、実用的なソリューションです。

=http://jsfiddle.net/UHnRL/2/は私がNaN（私は意味、私はそれを修正する方法を知っている）の多くを心配しないでください以下のマークアップ

<input type "text" id="total_price" readonly="readonly" /> 

Answer 2

：あなたがparseIntを行った後、ページの他の数がNaNですので、最初onchange計算に問題があるhttp://jsfiddle.net/UHnRL/

。テキストボックスが空白の場合は、デフォルト値をゼロに設定する必要があります。

あなたは、計算問題を解決するためにisNaN^[MDN]機能を使用することができます。

ここ

var colorPages = parseInt(document.getElementById("color").value); 
var blackPages = parseInt(document.getElementById("black").value); 

if (isNaN(colorPages)) 
{ 
    colorPages = 0; 
} 

if (isNaN(blackPages)) 
{ 
    blackPages = 0; 
}