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:


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:


<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

Try this ... (untested)

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.

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;

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

Thanks you two, works now. :)

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

Just one more thing guys. On my results, the 55% margin display is messed up. This screen shot says it all:

http://i52.tinypic.com/2lo3xbb.png

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


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

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

Alternatively:

var dspl = (marArray[i] * 100).toFixed(0) + '%';

or .toFixed(2) or whatever precision you desire.