Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Thanked 0 Times in 0 Posts

    Assign values from array

    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}

    HTML part:

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

  2. #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    London, England
    Thanked 2,700 Times in 2,676 Posts
    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>
    <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])
    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)
    Last edited by Philip M; 12-17-2010 at 05:46 PM. Reason: Typo


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts