Berechnungen zwischen Eingabefeldern

Question

Ich schreibe ein Skript, wo ich die Summe von zwei Berechnungen erhalten und das Gesamtangebot ermitteln muss. Das Problem ist, dass ich sie nicht zum Arbeiten bringen kann, wenn es darum geht, sie zusammenzufügen. Denken Sie daran, ich bin ein Neuling und der Code möglicherweise nicht vollständig optimiert, aber ich bin sicher, dass Sie den Punkt bekommen. Verbesserungen am Code sind mehr als willkommen.

<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

Hier ist die Arbeitslösung. http://jsfiddle.net/UHnRL/2/

= ist für den Typ in dem unten stehenden Markup fehlt

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

Answer 2

Es funktioniert für mich (meistens): http://jsfiddle.net/UHnRL/

Es gibt ein Problem mit der ersten onchange Berechnung, weil die andere Seitenzahl NaN ist, nachdem Sie die parseInt tun. Sie sollten es auf Null setzen, wenn das Textfeld leer ist.

Sie können die isNaN^[MDN] Funktion die Berechnung Problem beheben:

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

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

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