Update price for unit price* quantity

            function calculateTotal(){
            var unit_price = document.getElementById("sec3").value;
            var quantity = document.getElementById("sec4").value;
            var total_price = parseFloat(unit_price) * parseFloat(quantity);

                document.getElementById("sec5").innerHTML= total_price;

I tried my best to update the total price in a book ordering system but it doesn’t work. I’m currently working on the code above and I need some help.

Couple of things.

Right now as it is. The function is only defined, not invoked. Have you tried invoking the function? Where does it go wrong (no result, wrong result, error message)?

Try placing a console.log before the if statement to see if result is coming out.

If that works I’d double check the code block in the if-statement. If it doesn’t I would check the getElementById statements at the top.

For example, if you open your site and open the console, does the line document.getElementById("sec4").value; return a value?

Also, I don’t see result declared anywhere? (at least not in the provided code) Perhaps you meant:


If you are still having an issue then posting the complete code and the error msg will be helpful.


When we are going to use a callback repeatedly its okay to cache some global objects so the fetching only happens once, not over and over again.

// cached global objects (DOM nodes)
const unit_price = document.getElementById('each');
const quantity = document.getElementById('count');
const total = document.getElementById('total');
// callback
const calculateTotal = function () {
  total.textContent = (+unit_price.value * +quantity.value || '').toString();

Also, make sure your script is after all the HTML in the BODY, and is written just before the ENDTAG, </body>.