I am trying to learn Javascript (I'm a PHP developer) and I've written a simple script that I believe is most of the way to what I need.

Its very basic, I have 3 option inputs, first is quantity then 2 add-ons which both default to 0. Then a subtotal would populate beneath based on user input. Default is first option of quantity (25 in this case).

I defined arrays for the 3 option inputs, then assigned a variable to each one via getElementbyID ... then I would simply add them together and here I know my syntax is off. (It's the syntax of JS that I haven't been able to get my head around)

If someone can give me a quick logic guideline as to how and WHY ... that's what I'm looking for. Thx.

There are a number of problems, so let's go through them step by step.

The calculatesubtotal() function doesn't currently run, so you need to run it whenever one of the fields gets changed, and also when the page first loads. In order to do that most easily, move the script to the end of the body, just before the </body> tag. Putting your script at the bottom is a best-practice to help speed up the loading of your page, and it also allows the script to most easily work with the elements on the page.

Once it's there, you need to tell your price calculator to calculate the subtotal whenever something changes. You can also trigger that onchange event when the page first starts, so that it updates the subtotal then too.

How the script does that, is to get the quantity, return address, and the assembled liners, as the first part of the calculatesubtotal function.

Because they are strings, and we want to use them as numbers, we can retrieve the value from the selected option and convert it to a number. If it doesn't result in a valid number we can instead use a default value of 0.

With that preparation in place, the subtotal can be easily worked out.

var subtotal = qty + ret_add + liners;

I don't follow why you set the subtotal element to a block layout. In testing, that seems to break things, so you should be able to do without that part completely.

This part too doesn't seem to make sense:

amount.innerHTML = "Subtotal: $" ++subtotal ++;

Because the "Subtotal:" label is not a part of the span that contains the amount:

<h5>Subtotal: <span id="subtotal">$101.00</span></h5>

So the amount can instead be easily produced by adding a dollar symbol on to the calculated subtotal. You can even use the .toFixed() method to ensure that the displayed value is shown at two decimal places.

amount.innerHTML = "$" + subtotal.toFixed(2);

shotdsherrif
—
2011-08-05T10:31:12Z —
#3

It took a couple of days for me to get back to this part of my project but I really appreciate the response and the level of detail in it.

I'm grasping the logic of what you did. First retrieving the value, then converting it into a number. And I see that var subtotal should be set to the correct value.

But then it needs to be inserted into the subtotal id - doesn't it? With my element set as:

<h5>Subtotal: <span id="subtotal">$101.00</span></h5>

the line of code:

amount.innerHTML = "$" + subtotal.toFixed(2);

only defines the value of var subtotal within the script. The final step is to get the element again ...