DaniWeb IT Discussion Community

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)
-   JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)
-   -   Simple Math + Javascript (http://www.daniweb.com/forums/thread48488.html)

LiveWire Jun 23rd, 2006 3:46 pm
Simple Math + Javascript
 
Hey guys, I thought I figured it out but I didn't. I decided to create an admimated gif of what I'm looking to do. Could someone help me out and get me going in the right direction? A Basic HTML code would be great as I know really nothing about JavaScript. Thanks in advanced!

campkev Jun 23rd, 2006 5:19 pm
Re: Simple Math + Javascript
 
here's something to get you started.
<html>

<head>

<title>Our Products</title>

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

<style type="text/css"> 

        .submenu { padding-left:15px;}

                </style>

<script type="text/javascript">

<!--







function addItem(cb){



if(document.getElementById){

var elAmt = document.getElementById('Amt');

var elExtra = document.getElementById('extraAmt');

var elSub = document.getElementById('subAmt');

var elTax = document.getElementById('taxAmt');

var elTotal = document.getElementById('totAmt');

                var amount = parseFloat(elAmt.innerHTML);

                if(cb.checked){

                elExtra.innerHTML = "4.99";

                elSub.innerHTML = amount + 4.99;

                elTax.innerHTML = (amount + 4.99) * .06;

                elTotal.innerHTML = ((amount + 4.99) * 1.06);

                }

                else{

                elExtra.innerHTML = "0.00"

                elSub.innerHTML = "10.00"

                elTax.innerHTML = "0.60"

                elTotal.innerHTML = "10.60";

                }

        }

}





-->

</script>

</head>

<body>

<p><b>ProductList</b></p>



<br>

<br>

Product Information:



<table>

<tr><td>Item Description</td><td id='Amt'>10.00</td></tr>

<tr><td><input type=checkbox name=mType onclick="addItem(this)" value="prod3">Add extra product for 4.99</td><td id='extraAmt'>0.00</td></tr>

<tr><td>subtotal</td><td id='subAmt'>10.00</td></tr>

<tr><td>sales tax</td><td id='taxAmt'>0.60</td></tr>

<tr><td>grand total</td><td id='totAmt'>10.60</td></tr>

</table></form>

</body></html>

LiveWire Jun 23rd, 2006 11:42 pm
Re: Simple Math + Javascript
 
Thank you campkev, I will study the code.

digital-ether Jul 3rd, 2006 8:58 pm
Re: Simple Math + Javascript
 
Quote:
Originally Posted by LiveWire
Hey guys, I thought I figured it out but I didn't. I decided to create an admimated gif of what I'm looking to do. Could someone help me out and get me going in the right direction? A Basic HTML code would be great as I know really nothing about JavaScript. Thanks in advanced!


Hi LiveWire,

Heres a few basics that should help you out.

What you want to do is attach an event handler (function) to the checkbox. This event handler is then executed when the Checkbox is clicked.

Note: There are different types of event handlers in javascript, here you just want the 'onclick' event handler.

When the checkbox is clicked, the onclick event is fired for the checkbox.
Since we have specified a function to be executed (the event handler) when the checkbox is clicked, the function will be executed.

In our event handler, we will add the "feature price" to the total price of the Item, and then display it in the HTML of the page.

Example:

Say for example you have your checkbox:
[HTML]
<input type="checkbox" name="mycbox" id="mycbox" />
[/HTML]

Notice I have given it an id to make the js easier.

To get a reference to our checkbox I use the JavaScript function getElementById():

[HTML]
var mycheckbox = document.getElementById('mycbox');
[/HTML]

Then I can attach the event handler function to the checkbox:
[HTML]
mycheckbox.onclick = checkboxHandler;

function checkboxHandler() {
// function code goes here
}
[/HTML]

onclick is a property of all html elements. Here I have a reference to the checkbox html element via "mycheckbox". In JS properties have the syntax: object.property
So mycheckbox.onclick = checkboxHandler; sets the onclick property of mycheckbox to checkboxHandler, which is a function.

onclick is a special property which will be accessed when ever a user clicks on an object that has that property (eg: HTML Elements).

In your onclick even handler function you will have code to add/subtract the amount you need from the total amount.
This is quite simple math... :)

After the math, you have to change the display of the amounts in html.
There are different ways to do this, the recommended way is using the Document Object Module (W3C DOM) but to make things simple you can use innerHTML.

This is the property of an HTML Element which holds the HTML it contains.

eg:
[HTML]<b>This is some bold text</b>[/HTML]

the html element <b> has the property innerHTML of the value "This is some bold text".

If you were to set the innerHTML property of <b> to "New HTML" then the html inside <b> will change to that value, and show up on the browser as such.
[HTML]<b>New HTML</b>[/HTML]

In order to change the innerHTML of an HTML Element, you need to get a reference to that element. The easiest way is to create an id property for that element.

EG:
[HTML]<b id="boldtext">This is some bold text</b>[/HTML]

Now you can reference the <b> element using its id, "boldtext" with the function document.getElementById('boldtext');

eg:
[HTML]
<b id="boldtext">This is some bold text</b>
<script>
var b = document.getElementById('boldtext');
</script>
[/HTML]

So changing the Inner HTML of <b> to "New HTML" would be:

[HTML]
<b id="boldtext">This is some bold text</b>
<script>
var b = document.getElementById('boldtext');
b.innerHTML = "New HTML";
</script>
[/HTML]

Hope that helps clarify some of the JS...


All times are GMT -4. The time now is 2:25 am.

Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC