HensterRSA Posted July 31, 2012 Share Posted July 31, 2012 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <body><script> function alertTotal() { var aSelect = document.getElementById('a'); var bSelect = document.getElementById('b'); var cSelect = document.getElementById('c'); var aValue = aSelect.options[aSelect.selectedIndex].value; var bValue = bSelect.options[bSelect.selectedIndex].value; var cValue = cSelect.options[cSelect.selectedIndex].value; alert(parseInt(aValue) + parseInt(bValue) + parseInt(cValue)); }</script>CPU #######:<select id="a"><option value="0">Not selected</option> <option value="3500">I7 R3500.00</option> <option value="2500">I5 R2500.00</option> <option value="1500">I3 R1500</option> </select><br>Mother Board :<select id="b" width="230" STYLE="width: 430px" size="0"><option value="0">Not selected</option> <option value="363">Intel Houlton D2500 Mini-ITX - Supports 2 x DDR3 (Max 4GB). Up to 8 USB 2.0 Ports, 2 x SATA, 1 x Parallel Port, 2 x Serial Ports (via Header) 1 x D-Sub, 1 x Conventional PCI Slot, 10/100/1000 LAN</option> <option value="2">2</option> <option value="3">3</option> </select><br>RAM:#######<select id="c"><option value="0">Not selected</option> <option value="100">2GB DDR3 1333, 240-Pin Memory Module - PATRIOT</option> <option value="190">4GB DDR3 1333, 240-Pin Memory Module - PATRIOT</option> <option value="250">4GB DDR3 1333, 240-Pin Memory Module - Kingston </option> </select><br><br><br><br><button onclick="alertTotal();">Show Total</button> </body> When i click the total works fine but when i add the scritp to show the total i get nothing , i don't want to click to see the total Price: R<span id="alertTotal();"></span> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 31, 2012 Share Posted July 31, 2012 ??? you are using calling of function for id ref. normally set span to Price: R<span id="currentTotal">0</span> in the calculating function <script> function alertTotal() { var aSelect = document.getElementById('a'); var bSelect = document.getElementById('b'); var cSelect = document.getElementById('c'); var currentTotal = document.getElementById('currentTotal'); /* added by dsonesuk */ var aValue = aSelect.options[aSelect.selectedIndex].value; var bValue = bSelect.options[bSelect.selectedIndex].value; var cValue = cSelect.options[cSelect.selectedIndex].value; alert(parseInt(aValue) + parseInt(bValue) + parseInt(cValue));currentTotal.innerHTML=parseInt(aValue) + parseInt(bValue) + parseInt(cValue; /* added by dsonesuk */ }</script> if you wish current total to update whenever a option is selected add onchange="alertTotal()" to each select element id a, b and c. Link to comment Share on other sites More sharing options...
HensterRSA Posted July 31, 2012 Author Share Posted July 31, 2012 (edited) } onchange="alertTotal()" ;}</script>i added this and it's not updating Edited July 31, 2012 by HensterRSA Link to comment Share on other sites More sharing options...
HensterRSA Posted July 31, 2012 Author Share Posted July 31, 2012 <div>Price: R<span id="currentTotal"></span></div> added this as welll aslo not showing the price Link to comment Share on other sites More sharing options...
HensterRSA Posted July 31, 2012 Author Share Posted July 31, 2012 found it thanks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <body><script> function alertTotal() { var aSelect = document.getElementById('a'); var bSelect = document.getElementById('b'); var cSelect = document.getElementById('c'); var aValue = aSelect.options[aSelect.selectedIndex].value; var bValue = bSelect.options[bSelect.selectedIndex].value; var cValue = cSelect.options[cSelect.selectedIndex].value; //alert(parseInt(aValue) + parseInt(bValue) + parseInt(cValue)); total.innerHTML=parseInt(aValue) + parseInt(bValue) + parseInt(cValue); }</script>CPU #######:<select id="a" onchange="alertTotal();"><option value="0">Not selected</option> <option value="3500">I7 R3500.00</option> <option value="2500">I5 R2500.00</option> <option value="1500">I3 R1500</option> </select><br>Mother Board :<select id="b" width="230" STYLE="width: 430px" size="0" onchange="alertTotal();"><option value="0">Not selected</option> <option value="363">Intel Houlton D2500 Mini-ITX - Supports 2 x DDR3 (Max 4GB). Up to 8 USB 2.0 Ports, 2 x SATA, 1 x Parallel Port, 2 x Serial Ports (via Header) 1 x D-Sub, 1 x Conventional PCI Slot, 10/100/1000 LAN</option> <option value="2">2</option> <option value="3">3</option> </select><br>RAM:#######<select id="c" onchange="alertTotal();"> <option value="0">Not selected</option> <option value="100">2GB DDR3 1333, 240-Pin Memory Module - PATRIOT</option> <option value="190">4GB DDR3 1333, 240-Pin Memory Module - PATRIOT</option> <option value="250">4GB DDR3 1333, 240-Pin Memory Module - Kingston </option> </select><br><br><br><br><div>Total: R<span id="total">0</span></div><!-- <button onclick="alertTotal();">Show Total</button> --></body> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 31, 2012 Share Posted July 31, 2012 you have told that aSelect refers to element with id="a"you have told that bSelect refers to element with id="b"you have told that cSelect refers to element with id="c" but you have not told it what total refers to look at my example with /* added by dsonesuk*/ Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now