Assign values from array

[empty42]

I'm having problems with selecting values from array.

I have a dropdown box where you choose what fruit you want to buy.
When selected the array should assign 2 values to that fruit.

I don't know how to do that.
Here's what I have.. I added comments.

Javascript part:

<script type="text/javascript">
function Fruits() {


var selectfruit = newArray( //assigning values to fruit selected from dropdown box
			newArray("Banana", 1, 1),
			newArray("Apple", 1.2, 0.5),
			newArray("Mango", 1.1, 0.9),
			newArray("Orange", 0.1, 9.99)); 
var howmanyfruits = Number(document.getElementById("howmanyfruits").value); // how many fruits are you buying
var totalfruitsowned = Number(document.getElementById("totalfruitowned").value); // How many fruits do you already have

/* cash and coupons needed to buy fruits.
   cash is cpst for 1 fruit.
   coupons is cost for 1 fruit
   cash_all is cost for all fruits you're buying
   coupons_all is cost for all fruits you're buying
   
   each fruits requires cash AND coupons to be bought. Cash and coupons are tied to the first values in Array. 
   Eg. If you choose Apple that value would be 1.2  
   
   The 'fruitsmaxtobuy' variable is not tied to the first value, but the second one in array.
   If you choose Apple that value would be 0.5.
*/
   
var cash = Math.round(((totalfruitsowned * 0.51 * selectfruit) + 700)*10)/10;
var coupons = Math.round(((totalfruitsowned * 0.51 * selectfruit) + 850)*10)/10;
var cash_all = Math.round((howmanyfruits * cash)*10)/10; 
var coupons_all = Math.round((howmanyfruits * coupons)*10)/10; 

var fruitsmaxtobuy = Math.round((totalfruitsowned * 0.12 * selectfruit)*10)/10;

/*
Display Error if nothing is entered or if you forget to enter total fruits 
*/

if (((howmanyfruits=="" || howmanyfruits==null) && (totalfruitsowned=="" || totalfruitsowned==null)) || ((howmanyfruits==Number(document.getElementById("howmanyfruits").value)) && (totalfruitsowned=="" || totalfruitsowned==null)))
{document.getElementById("cash").innerHTML = "Error";
document.getElementById("coupons").innerHTML = "Error";
document.getElementById("cash_all").innerHTML = "Error";
document.getElementById("coupons_all").innerHTML = "Error";
document.getElementById("fruitsmaxtobuy").innerHTML ="Error"}
else {
document.getElementById("cash").innerHTML = cash;
document.getElementById("coupons").innerHTML = coupons;	
document.getElementById("cash_all").innerHTML = cash_all;
document.getElementById("coupons_all").innerHTML = coupons_all;
document.getElementById("fruitsmaxtobuy").innerHTML =fruitsmaxtobuy}
}
</script>

HTML part:

<form action="" id="fruitcost">
<table align="center" width="37.5%" cellpadding="0" cellspacing="0">
	<tbody>
    	<tr>
        	<th colspan="2" align="center">Fruit cost calcultor</th>
        </tr>    
   		<tr>
			<td>Select Fruit:</td>
            <td align="center"><select id="selectfruit">
      		 		<option>Banana</option>
        	    	<option selected>Apple</option>
        			<option>Mango</option>
        			<option>Orange</option>
   				</select>  
            </td>   
        </tr>
        <tr>
			<td>Total Fruits Owned:</td>
            <td align="center"><input id="totalfruitsowned" type="text" /></td>
		</tr>
        <tr>
			<td>How many fruits are you buying:</td>
            <td align="center"><input id="howmanyfruits" type="text" /></td>
		</tr> 
        <tr>
        	<td>Money Needed to buy 1 fruit:</td><td><font id="cash"></font></td>
        </tr>
        <tr>
        	<td>Coupons Needed to buy 1 fruit:</td><td><font id="coupons"></font></td>
        </tr>                              
        <tr>
        	<td>Money Needed:</td><td><font id="cash_all"></font></td>
        </tr>
        <tr>
        	<td>Coupons Needed:</td><td><font id="coupons_all"></font></td>
        </tr>
                <tr>
        	<td>Nr. of fruits you can buy:</td><td><font id="fruitsmaxtobuy"></font></td>
        </tr>
        <tr>
        	<td align="center" colspan="2"><input type="button" value="Submit" onclick="Fruits()" /></td>
        </tr>    
    </tbody>
</table>
    </form>

[Philip M]

You can best include multiple sub-values within the value of an option, using a delimiter such as ~ and then splitting the value into an array.

<select id="selectfruit" onchange = "getValues()">
<option value = "0">Select ......</option>
<option value = "Banana~1~1">Banana</option>
<option value = "Apple~1.2~0.5">Apple</option>
<option value = "Mango~1.1~0.9">Mango</option>
<option value = "Orange~0.1~9.99">Orange</option>
</select>  

<script type = "text/javascript">
function getValues() {
var val = document.getElementById("selectfruit").value;
if (val !=0) {
var valSplit = val.split("~");
alert (valSplit[0] + " " + valSplit[1] + "  " + valSplit[2])
}
}
</script>

You should not gve the same name or id (selectfruit, cash, coupons) to an HTML form element and a Javascript function or variable.

If (or as) this is homework and you are required to use an array, then you have the syntax wrong.

var selectfruit = [];
selectfruit[0] = ["Nothing Selected", 0, 0];  // you must have a default value if you are using onchange
selectfruit[1] = ["Banana", 1, 1];
selectfruit[2] = ["Apple", 1.2, 0.5];
selectfruit[3] = ["Mango", 1.1, 0.9];
selectfruit[4] = ["Orange", 0.1, 9.99];

alert (selectfruit[3][0] + " " + selectfruit[3][2]); // example

Then access the values using selectedIndex.

A politician is one who preaches doctrines he knows to be untrue to men he knows to be idiots."
H. L. Mencken - US editor (1880 - 1956)