Javascript cost estimator issue

#1

Trying to have the option when clicking button “Add to quote” will add the result from the estimate into a new object in the cart. Then have the current cart show at the bottom. Here is the pen you can look at.

I’m a noob and there is some code i’m not using in there. I’m not sure if we can hire people here… I’m open to that if so.
other issues

I can only get Value to show instead of name above the price
I tried document.getElementById(“choice”).name and .getAttribute(“name”)

Thanks

#2

Question: You link to a file called learn24.js, Is the contents of this file in the JS section now?

#3

I can only get Value to show instead of name above the price
I tried document.getElementById(“choice”).name and .getAttribute(“name”)

Change how you declare Product1 to the following:

var choice = document.getElementById("choice");
var Product1 = choice.options[choice.selectedIndex].text;
#4

yes. Pretty new to codepen so I transfered from my own files into here. I took that out now since I don’t need it in codepen. Thanks for the tips.

#5

Worked like a charm. Thanks!

I have 2 checkboxes “low-e” “tempered”

is there a way that if the box is checked it will alter the price by adding totalSquareFeet x 3$ for example?

What about the add to quote button that takes the current estimated product and puts it into the cart?

#6

The answer is Yes to both of your questions. Instead of me giving you the solution for the 1st question, I will show you a very basic example below and you can study it and then apply it in your code. If you had a lot of check boxes, there are some more efficient ways approaching this part, but since you only have two, the code below will work for your purposes.

Example HTML

<input type="checkbox" id="abc"> ABC
<input type="checkbox" id="xyz"> XYZ

Example JavaScript:

var abc = document.getElementById('abc').checked; // gets a true or false value
if(abc){ 
  // do something
}

var xyz= document.getElementById('xyz').checked; // gets a true or false value
if(xyz){ 
  // do something
}

For the 2nd question, the answer is more involved than a simple one or two line answer, so try writing putting some code in the Codepen you posted and if you get stuck, then ask some questions. You will learn much more by implementing something on your own.

#7

OK. I have used your great advice and worked on my own.

When adding item to cart I want the bottom to display total price and total square feet and total count. But it does 100+100 = 100100 instead of 200 for example

Also, what about my results being limited to 2 decimal places?

Thanks for your guys’ help.

#8

When you get the contents of the html using getElementBy, you’re extracting a string. If you use the “+” operator on 2 strings, then you’re just appending it together.

You need to convert the string to an int or float value before you add them, so you’ll get the numeric total (instead of a string concatenation)

1 Like
#9

When you have made all your calculations and are ready to display the number back showing 2 decimals, then use the toFixed function.

1 Like
#10

Thanks man. Got it working.

#11

Thanks for your help got it working.

#12