jbs Posted May 15, 2017 Share Posted May 15, 2017 Hello, I'm currently trying to put together a simple javascript calculator. The example I've found works great but I seem to be unable to get two pretty important changes to take place. The first thing I'm trying to do is get a $ symbol inside the total box, aligned left before the total (and also have the default value before changing anything to display "$0"). The other thing would be getting the "input-text qty text" class to have an effect on the total price. I appreciate any help in advance. <FORM Name="myform"> <SELECT NAME="memoryItem" onChange="calculatePrice()" id="memoryItem"> <OPTION value="0">Select One Choice from List-Memory Upgrade</OPTION> <OPTION value="49">8 GB add $49</OPTION> <OPTION value="98">12 GB add $98</OPTION> <OPTION value="159">16 GB add $159</OPTION> </SELECT> <SELECT NAME="hddItem" onChange="calculatePrice()" id="hddItem"> <OPTION value="0">Select One Choice from List-HDD Upgrade</OPTION> <OPTION value="109">1 TB HD add $109</OPTION> <OPTION value="150">1.5 TB HD add $150</OPTION> <OPTION value="199">2 TB HD add $199</OPTION> <OPTION value="299">250 GB SSD add $299</OPTION> </SELECT> <SELECT NAME="networkItem" onChange="calculatePrice()" id="networkItem"> <OPTION value="0">Select One Choice from List- Network Upgrade</OPTION> <OPTION value="109">56K V90 or X2 Modem add $109</OPTION> <OPTION value="79">10/100 NIC add $79</OPTION> <OPTION value="279">Combo Modem and NIC add $279</OPTION> </SELECT> </FORM> <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" style="width: 62px; color: #000" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" /> <INPUT type="text" id="PicExtPrice" Size=8> <script> function calculatePrice(){ //Get selected data var elt = document.getElementById("memoryItem"); var memory = elt.options[elt.selectedIndex].value; elt = document.getElementById("hddItem"); var hdd = elt.options[elt.selectedIndex].value; elt = document.getElementById("networkItem"); var network = elt.options[elt.selectedIndex].value; //convert data to integers memory = parseInt(memory); hdd = parseInt(hdd); network = parseInt(network); //calculate total value var total = memory+hdd+network; //print value to PicExtPrice document.getElementById("PicExtPrice").value=total; } </script> Link to comment Share on other sites More sharing options...
dsonesuk Posted May 15, 2017 Share Posted May 15, 2017 Instead of input for Total, why not use a element such as div, then use content: to add $ symbol #PicExtPrice {min-width: 200px; display: inline-block; border: 1px ridge #ccc;} #PicExtPrice:before {content: "$"; } <div id="PicExtPrice">0</div> change js to document.getElementById("PicExtPrice").innerHTML=total; Link to comment Share on other sites More sharing options...
jbs Posted May 15, 2017 Author Share Posted May 15, 2017 27 minutes ago, dsonesuk said: Instead of input for Total, why not use a element such as div, then use content: to add $ symbol #PicExtPrice {min-width: 200px; display: inline-block; border: 1px ridge #ccc;} #PicExtPrice:before {content: "$"; } <div id="PicExtPrice">0</div> change js to document.getElementById("PicExtPrice").innerHTML=total; That works great, guess I was way off trying to make changes within js itself to force the "$" to display. I swear I'm almost done bugging you guys with these silly simple questions. 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