javascript - 入力ボックス間の計算

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

score 0 · Accepted Answer

これが実用的な解決策です。http://jsfiddle.net/UHnRL/2/

=以下のマークアップのタイプに欠落しています

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

score 0 · Accepted Answer

It works for me (mostly): http://jsfiddle.net/UHnRL/

There is an issue with the first onchange calculation, because the other number of pages is NaN after you do the parseInt. You should default it to zero if the text box is blank.

You can use the isNaN^[MDN] function to resolve the calculation issue:

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

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

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

javascript - 入力ボックス間の計算

2 に答える 2

Related

Reference