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

    Displaying array values/calculations into a div

    Hi all,

    Decided to start learning JavaScript, started 2 days ago. Anyway, I'm trying to create a simple script spits out a styled result based on a user input.

    Here is my JS:

    Code:
    function dispTable (form) {
           var userCost2 = form.venCost2.value * 1;
          marArray = new Array ("0.05", "0.1", ".15", "0.2", "0.25", "0.3", "0.35", "0.4", "0.45", "0.5", "0.55", "0.6", "0.65", "0.7", "0.75", "0.8");
             for (var i=0; i<marArray.length; i++) {
                document.tableDiv.innerHTML = "<div>"
                document.tableDiv.innerHTML = userCost2;
                document.tableDiv.innerHTML = marArray[i];
                document.tableDiv.innerHTML = + userCost2 * marArray[i];
                document.tableDiv.innerHTML = "<\/div>";
       }
    }
    Here is my HTML:

    Code:
    <div class="container">
       <form name="lasoCalcTable">
         <span>Enter Vendor Cost</span>
           <input class="textForm" name="venCost2" id="venCost2" type="text" size="8" />
            <hr />
            <input class="butForm" name="calcTblBut" type="button" value="Calculate" onclick="dispTable()" /><br />
        </form>
       
        <div title="tableDiv" id="tableDiv">
    
         </div>
         
    </div>
    The problem is that nothing is happening when I press the calculation button.

    What I would like to happen is to display a div element for each value in the array which displays the entered value from VenCost2, the current Margin %, and the result of VenCost2 * margin%. I want this to display on the same page and underneath the calculation button, preferably not having to reload the page.

    I thought this was going to be relatively easy but doesn't seem so!

    Thanks for your help

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try ...

    Try this ... (untested)
    Code:
    function dispTable (form) {
           var userCost2 = form.venCost2.value * 1;
          marArray = new Array ("0.05", "0.1", ".15", "0.2", "0.25", "0.3", "0.35", "0.4", "0.45", "0.5", "0.55", "0.6", "0.65", "0.7", "0.75", "0.8");
      var str = '';
      for (var i=0; i<marArray.length; i++) {
        str += '<div>'+userCost2+marArray[i]+userCost2*marArray[i]+'<\/div>';
      }
      document.tableDiv.innerHTML = str;
    }
    Part of your problem is that you continue to OVERWRITE the .innerHTML with each pass of the loop.

  • Users who have thanked jmrker for this post:

    ekornmeyer (01-02-2011)

  • #3
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That makes a lot of sense, thanks.

    It's still not displaying anything when I press the calculate button though. The FF error console is saying:


    document.tableDiv is undefined

    I thought it was being defined at:
    document.tableDiv.innerHTML = str;

  • #4
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Code:
    function dispTable (form) {
           var userCost2 = form.venCost2.value * 1;
          marArray = new Array ("0.05", "0.1", ".15", "0.2", "0.25", "0.3", "0.35", "0.4", "0.45", "0.5", "0.55", "0.6", "0.65", "0.7", "0.75", "0.8");
      var str = '';
      for (var i=0; i<marArray.length; i++) {
        str += '<div>'+userCost2+marArray[i]+userCost2*marArray[i]+'<\/div>';
      }
      document.getElementById('tableDiv').innerHTML = str;
    }

  • Users who have thanked Nile for this post:

    ekornmeyer (01-02-2011)

  • #5
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks you two, works now.

    Very quick responses as well, this forum is already looking awesome.

  • #6
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Just one more thing guys. On my results, the 55% margin display is messed up. This screen shot says it all:



    Here is the code, can't figure out why just the 55% one is displaying like that.

    Code:
    function dispTable (form) {
        var userCost2 = form.venCostTwo.value * 1;
        marArray = new Array (.05, .1, .15, .2, .25, .3, .35, .4, .45, .5, .55, .6, .65, .7, .75, .8);
        var str = '';
      		for (var i=0; i<marArray.length; i++) {
    	var baseTPri = parseInt(userCost2 + userCost2 * marArray[i]);
    	var dspl = marArray[i] * 100 + '%';
        	str += '<div class="indMar">&nbsp; <strong>Vendor Cost: <\/strong>$'+userCost2+'&nbsp; <strong>Margin: <\/strong>'+dspl+'&nbsp; <strong>Base Price: <\/strong>'+baseTPri+'<\/div>';
      }
      document.getElementById('tableDiv').innerHTML = str;
    }

  • #7
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Code:
    function dispTable (form) {
        var userCost2 = form.venCostTwo.value * 1;
        marArray = new Array (.05, .1, .15, .2, .25, .3, .35, .4, .45, .5, .55, .6, .65, .7, .75, .8);
        var str = '';
      		for (var i=0; i<marArray.length; i++) {
    	var baseTPri = parseInt(userCost2 + userCost2 * marArray[i]);
    	var dspl = Math.round(marArray[i] * 100) + '%';
        	str += '<div class="indMar">&nbsp; <strong>Vendor Cost: <\/strong>$'+userCost2+'&nbsp; <strong>Margin: <\/strong>'+dspl+'&nbsp; <strong>Base Price: <\/strong>'+baseTPri+'<\/div>';
      }
      document.getElementById('tableDiv').innerHTML = str;
    }

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Alternatively:
    Code:
    	var dspl = (marArray[i] * 100).toFixed(0) + '%';
    or .toFixed(2) or whatever precision you desire.


  •  

    Posting Permissions

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