Need help with simple price x quantity calculation

[brossyg]

I have a very simple price times quantity calculation.

The input is STWCORQuant:

<input name="STWCORQuant" class="contactitalicbold" id="STWCORQuant" onChange="javascript:STWCORPrice();" value="0" size="8" style="text-align: right; font-family: ver">

And the fucntion is STWCORPrice():

<script language="javascript" type="text/javascript">
 
function STWCORPrice() {
        var price = 0;
        var shipping = 0;
        var total=0;
        var qnty=document.all.STWCORQuant.value;
 
        if (qnty > 49 && qnty < 75){
                    price = 23;
                    shipping = 6.25;
                    }
 
                else if (qnty > 74 && qnty < 100){
                    price = 17;
                    shipping = 6.25;
                        }
 
                else if (qnty > 99 && qnty < 200){
                    price = 14;
                    shipping = 6.25;
                        }
 
                else if (qnty > 199 && qnty < 250){
                    price = 13.75;
                    shipping = 7.75;
                        }
 
        total = (price * qnty)+shipping;        
        document.all.STWCORIssueCost.value= '$ '+ total.toFixed(2);
    }
 
</script>
 

The output is this:

<td width="15%" id="STWCORIssueCost" Font Class="sidemenutextgrn" align="right">$0</Font></td>

It doesn't work, but looks like it should. When a quantity is input and the box is tabbed out of, nothing happens. I can't tell what is wrong....need help!

Thanks

[Dormilich]

you should use document.getElementById() instead of document.all (that's IE syntax and not understood by many browsers).

rename onChange to onchange.

what is the value of qnty?

you could also call your function as STWCORPrice(this.value) (adjust function code...), so you don't need to fetch the value from the document tree.

regards

[brossyg]

you should use document.getElementById() instead of document.all (that's IE syntax and not understood by many browsers).

rename onChange to onchange.

what is the value of qnty?

you could also call your function as STWCORPrice(this.value) (adjust function code...), so you don't need to fetch the value from the document tree.

regards

I changed line five of the code per your suggestion:

 
function STWCORPrice() {
        var price = 0;
        var shipping = 0;
        var total=0;
        var qnty=GetElementById(STWCORQuant);
 
        if (qnty > 49 && qnty < 75){
                    price = 23;
                    shipping = 6.25;
                    }
 
                else if (qnty > 74 && qnty < 100){
                    price = 17;
                    shipping = 6.25;
                        }
 
                else if (qnty > 99 && qnty < 200){
                    price = 14;
                    shipping = 6.25;
                        }
 
                else if (qnty > 199 && qnty < 250){
                    price = 13.75;
                    shipping = 7.75;
                        }
 
        total = (price * qnty)+shipping;        
        document.all.STWCORIssueCost.value= '$ '+ total.toFixed(2);
    }
 
 

The value of qnty is the quantity input by the user (variable id is "STWCORQuant")

It still doesn't work...and the onchange vs. OnChange made no difference when I tried it (all the other OnChange events are capitalized the same way).

Have I used the GetElementById correctly?

[Dormilich]

you don't have. in your case you have to call it as

var qnty = document.getElementById("STWCORQuant");

to get the value of qnty add somewhere after its definition

alert(qnty);

this will show an alert box with qnty's value.

regards

[brossyg]

OK...we have made some progress...I fixed the code per your suggestion. It is now:

function STWCORPrice() {
        var price = 0;
        var shipping = 0;
        var total=0;
        var qnty=document.getElementById("STWCORQuant");
        alert(qnty);
 
        if (qnty > 49 && qnty < 75){
                    price = 23;
                    shipping = 6.25;
                    }
 
                else if (qnty > 74 && qnty < 100){
                    price = 17;
                    shipping = 6.25;
                        }
 
                else if (qnty > 99 && qnty < 200){
                    price = 14;
                    shipping = 6.25;
                        }
 
                else if (qnty > 199 && qnty < 250){
                    price = 13.75;
                    shipping = 7.75;
                        }
 
        total = (price * qnty)+shipping;        
        document.all.STWCORIssueCost.value= '$ '+ total.toFixed(2);
    }
 
 

However, when the OnChange is triggered with an input, the result is an alert box that simply says: [Object]

So, the Onchange is working to call the function, but the input variable STWCORQuant is not making it to the alert correctly in these two lines:

var qnty=document.getElementById("STWCORQuant");
alert(qnty);
 

We are closer, but there seems to be a problem calling the variable and using it in the definition of qnty.

The input line is:

<input name="STWCORQuant" class="contactitalicbold" id="STWCORQuant" onChange="javascript:STWCORPrice();" value="0" size="8" style="text-align: right; font-family: ver">
 

Any suggestions?

[gits]

when you use:

var qnty = document.getElementById("STWCORQuant");

then qnty stores a reference to the node ... you just need to retrieve its value with:

var qnty = document.getElementById("STWCORQuant").value;

or alert it as:

alert(qnty.value)

kind regards

[brossyg]

Great! Now the alert correctly shows the value, but the output on the page remains $0 (nothing changes). The output code is:

document.all.STWCORIssueCost.value= '$ '+ total.toFixed(2);
 

I know the code is now working up to this point because I "alerted" all the variables in the lines just before this and they all are correct.

I also tried:

document.all("STWCORIssueCost").value= '$ '+ total.toFixed(2);
 

The place where it goes on the page is:

 <td width="15%" id="STWCORIssueCost" Font Class="sidemenutextgrn" align="right">$0</Font></td>
 

Can you see why the total is not being displayed at STWCORIssueCost ?

[acoder]

Two issues:
1. Use document.getElementById() in place of document.all.
2. Use innerHTML in place of .value because a td element doesn't have a value.

[brossyg]

It works...thank you very much!

[acoder]

Glad it does! Post again if you have more questions and we'll be happy to help.

[Dormilich]

@acoder
I think, node.nodeValue should work also.

regards

[acoder]

Actually, it wouldn't. You'd need to use firstChild.nodeValue in place of innerHTML.

[Dormilich]

you're right, I forgot the child status of the text node.....

Dormi
(doing currently too much PHP)