Javascript数组元素的操作

时间:2017-02-15 18:34:08

标签: javascript html

使用以下代码,在函数placeOrder()中,我无法使用price []数组元素和chairAmtA(以及我拥有的以下数量变量)来进行计算。它总是以NaN的形式返回答案。代码有什么问题,如何解决?

    

<title>
Ryan Weiland, Assignment 2
</title>


        <!--Load stylesheet-->
        <link rel="stylesheet" type="text/css" href="assignment2.css"> 

        <!--Load description variables-->
        <script type="text/javascript" src="script.js" > 
        </script>

        <script>



                    <!--Initilize variables for calculations--> 
                    var chairCost = 50;
                    var deskCost = 150;
                    var rockerCost = 250;
                    var tableCost = 200;
                    var ftstlCost = 75;

                    var fname;
                    var lname;
                    var streetName;
                    var cityName;
                    var state;
                    var zip;
                    var phoneOne;
                    var phoneTwo;
                    var phoneThree;

                    var chairAmt;
                    var deskAmt;
                    var rockerAmt;
                    var tableAmt;
                    var ftstlAmt;






function orderTotal(){


//window.alert("This Function Works");



//Personal Information
var fname = document.items.first.value;
var lname = document.items.last.value;
var streetName = document.items.street.value;
var cityName = document.items.city.value;
var state = document.items.state.value;
var zip = document.items.zipCode.value;
var phoneOne = document.items.pOne.value;
var phoneTwo = document.items.pTwo.value;
var phoneThree = document.items.pThree.value;

//Item Aomount
chairAmt = document.items.chairs.value;
deskAmt = document.items.desks.value;
rockerAmt = document.items.rockers.value;
tableAmt = document.items.tables.value;
ftstlAmt = document.items.ftstls.value;


//Calculations


                //Chair Total
                    var costChairT = chairAmt*chairCost;
                //Desk Total
                    var costDeskT = deskAmt*deskCost;
                //Rocker Total
                    var costRockerT = rockerAmt*rockerCost;
                //Table Total
                    var costTableT = tableAmt*tableCost;
                //Footstool Total
                    var costFtstlT = ftstlAmt*ftstlCost;
                //Overall Total Cost
                    var totalCost = costChairT + costDeskT + costRockerT + costTableT + costFtstlT;
                //Personal Total
                    var personalTotal = fname + " " + lname + "\n" + streetName + ", \n" + cityName + " " + state + ", \n" + zip + "\nPhone Number: " + phoneOne + "- " + phoneTwo + "- " +phoneThree + "\n";
                //New window with everything retrieved
                window.alert(personalTotal + "Total Cost: $" + totalCost);
            }

function placeOrder(chairsAmt, desksAmt, rockersAmt, tablesAmt, ftstlsAmt) {


//window.alert("placeOrder runs");
var order = [];

//Prices in array
var prices = [50, //Chair
150, //Desk
250, //Rocking Chair
200, //Table
75]; //Footstool


//Personal Information
order[0] = document.items.first.value;
order[1] = document.items.last.value;
order[2] = document.items.street.value;
order[3] = document.items.city.value;
order[4] = document.items.state.value;
order[5] = document.items.zipCode.value;
order[6] = document.items.pOne.value;
order[7] = document.items.pTwo.value;
order[8] = document.items.pThree.value;

//Item Aomount
var chairAmtA = document.items.chairs.value;
var deskAmtA = document.items.desks.value;
var rockerAmtA = document.items.rockers.value;
var tableAmtA = document.items.tables.value;
var ftstlAmtA = document.items.ftstls.value;




var prices = "Prices\nChair: " + prices[0] + "\nDesk: " + prices[1] + "\nRocking Chair: " + prices[2] + "\nTable: " + prices[3] + "\nFootstool: " + prices[4] + "\n\n";



                //Chair Total
                var chairCostA = chairAmtA * prices[0];
                //Desk Total
                var deskCostA = deskAmtA * prices[1];
                //Rocker Total
                var rockerCostA = rockerAmtA * prices[2];
                //Table Total
                var tableCostA = tableAmtA * prices[3];
                //Footstool Total
                var ftstlCostA = ftstlAmtA * prices[4];

                //Overall Total Cost
                var totalCostA = chairCostA + deskCostA + rockerCostA + tableCostA + ftstlCostA;

                //Personal Total
                personalTotalA= order[0] + " " + order[1] + "\n" 
                + order[2] + ", " + order[3] + "\n" 
                + order[4] + ", " + order[5] + "\n"
                + "Phone Number: " + order[6] + "-" + order[7] + "-" + order[8] + "\n\n";


                //Quantity ordered
                var quantity = "Chairs Ordered: " + chairAmtA + "\nDesks Ordered: " + deskAmtA + "\nRocking Chairs Ordered: " + rockerAmtA + "\nTables Ordered: " + tableAmtA + "\nFootstools Ordered: " + ftstlAmtA + "\n\n";

                //New window with everything retrieved
                var x = window.confirm(personalTotalA + quantity + prices + "\nTotal Cost: $" + totalCostA);
                if(x ==true)
                    window.alert("Your order has been placed!");

                else
                    window.alert("Your order has been cancled.");

}
</script>

<h1>Swanson's Woodworking</h1>
<h2>Customer Order Form</h2>
<br />

<!--List of items-->
<form name="items">
<br />
<br />  

<!--Chair-->
Click the button for a description. 
<input type="radio" name="items" onclick="document.item.itemDesc2.value=chairDesc" />
<b>Chair($50)</b>
<br />  
<!--Desk-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=deskDesc" />
<b>Desk($150)</b>
<br />
<!--Rocking Chair-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=rockerDesc" />
<b>Rocking Chair($250)</b>
<br />  
<!--Table-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=tableDesc" />
<b>Table($200)</b>
<br />  
<!--Footstool-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=ftstlDesc" />
<b>Footstool($75)</b>
<br />  
<!--Textarea for descriptions-->
<p>
    <textarea name="itemDesc2" cols="30" rows="5" style="background-color: transparent; border: 1; font-size:20px; overflow: hidden; color: #5e0000">
    </textarea>
</p>    


<!--Information Form-->



<!--Personal Information-->

First Name: <input type="text" name="first">
<br /><br />
Last Name : <input type="text" name="last">
<br /><br />
Street Address:<input type="text" name="street">
<br /><br />
City: <input type="text" name="city">
<br /><br />
State: <input type="text" name="state">
<br /><br />
Zip Code: <input type="text" name="zipCode">
<br /><br />
Phone Number: (<input type="text" name="pOne" size="3">) - <input type="text" name="pTwo" size="3"> - <input type="text" name="pThree" size="4">
<br /><br />

<!--List of items-->
Chairs Desired: <input type="number" name="chairs">
<br /><br />
Desks Desired: <input type="number" name="desks">
<br /><br />
Rocking Chairs Desired: <input type="number" name="rockers">
<br /><br />
Tables Desired: <input type="number" name="tables">
<br /><br />
Footstools Desired: <input type="number" name="ftstls">
<br /><br />

</form>


<!--Calculate your total order.-->


<input type = "button" onclick = "orderTotal()" value = "Calculate your total order" > <!--Button for total-->
<br /><br > 
<input type = "button" onclick = "placeOrder()" value = "Place Order" > <!--Button for total-->

1 个答案:

答案 0 :(得分:0)

看起来你试图减去两个字符串:

console.log("12"-"13");

您需要将所有输入(它们是字符串)转换为数字:

val=input.value.toNumber();

或者:

VAL =(+ input.value);