JavaScript Dom Issues with the code

Question

JS DOM issues with the Code and reset buttons Hi guys, hope all is going well) Can somebody help me pls to debug and find the solution for my issues?

1) How to reset the total amount in JS and total Tax amount? I can reset now the quantity because of the DOM querySelectorAll and then set to 0 But the rest can't understand yet.

2) I added 4 variables with the description of the items. But now how to show those descriptive names of the items once 2 burgers have been selected let's say? For me now it only shows the amount 15.99$ but not the name even I tried adding variable names to the output and then removed. So I want it to show Burger meal Option 3 and the price of it 17.99$

The link of the snapshot of my workspace: https://w.trhou.se/jo0r9wdywo

Really appreciate your help with this))))

Answer 1 · 2020-02-14T17:05:00Z

February 14, 2020 5:05pm

Something like this?

https://w.trhou.se/ydcw28ey1h

 <script>
        //.textContent changes the text of the text in html super handy for manipulation...
        // Your code here...  
        //displayOptionPrices();      
        var orders = {1:{name: "Soup", price: 9.99, amount: 0}, 2:{name: "Pizza", price: 15.99, amount: 0}, 3:{name: "Burger Meal", price: 17.99, amount: 0}, 4:{name: "Salad", price: 12.99, amount: 0}}
        console.log(orders);

        function displayOptionPrices() {
            var option1 = document.getElementById("hOption1").textContent = orders[1].name + " costs " + orders[1].price + " $";
            var option2 = document.getElementById("hOption2").textContent = orders[2].name + " costs " + orders[2].price + " $";
            var option3 = document.getElementById("hOption3").textContent = orders[3].name + " costs " + orders[3].price + " $";
            var option4 = document.getElementById("hOption4").textContent = orders[4].name + " costs " + orders[4].price + " $";
        }



        // Quantity of the meal and all the counting variables
        var orderingNumber = 0;
        const HST_TAX = 0.13;
        var taxCalculation = 0;
        var totalAmount = 0;

        var order = " ";



       // Functions in order to inrecemnt the quantity number 
        var i = 0;
        function buttonClick1() {
            document.getElementById('option1Quantity').value = ++i;
            orders[1].amount++;
        }

        var a = 0;
        function buttonClick2() {
            document.getElementById('option2Quantity').value = ++a;
            orders[2].amount++;
        }


        var b = 0;
        function buttonClick3() {
            document.getElementById('option3Quantity').value = ++b;
            orders[3].amount++;
        }

        var c = 0;
        function buttonClick4() {
            document.getElementById('option4Quantity').value = ++c;
            orders[4].amount++;
        }


        /// Reset button onclick event so it resets the quantity of the  items added to Order

        function myResetFunction() {
            document.querySelectorAll("input")[0]
                .value = 0;
            document.querySelectorAll("input")[2]
                .value = 0;
            document.querySelectorAll("input")[4]
                .value = 0;
            document.querySelectorAll("input")[6]
                .value = 0;

        }





       //Function to calculate the total amount and the total tax amount or sum

        function calculating() {
            var totalOrders = Object.keys(orders).reduce((t, c) => t + (orders[c].amount * orders[c].price), 0);

            var taxCalculation = totalOrders * HST_TAX;
            taxCalculation = Math.round(taxCalculation);



            //calculate the TotalAmount through adding tax and subTotal amount and rounding the number in the end
            var totalAmount = totalOrders + taxCalculation;
            totalAmount = Math.round(totalAmount);


            // var OutputAmount = Math.trunc(totalAmount);



            var displayMessage2 = ("Tax: " + taxCalculation + "$" + "<br>" + "Total Bill: " + totalAmount + "$" + "<br>" + "<ul>");

            for(let key of Object.keys(orders)){
                displayMessage2 += "<li>" + orders[key].amount + " " + orders[key].name + " | " + orders[key].price + " | " + orders[key].amount * orders[key].price + "</li>";
             }
            displayMessage2 += "</ul>";
            document.getElementById("theOutputArea").innerHTML = displayMessage2;

        }



    </script>

as for resetting the amount, you'd need to reset the javascript value as well.

In my example that would mean you'd need to reset the amounts inside the object.

so for each of the menu items (selected by id) you'd set orders[id].amount to 0.

note I have not done this in my example, so you'd need to fix that yourself.

It's a nice little app you created. My advice to you is to try and rewrite your code a little to reduce repetition. You have lots of repeated functions, which can be replaced by just a single function you just reuse.

Let me know if you have any questions.

Welcome to the Treehouse Community

Looking to learn something new?

Tadjiev Codes

Tadjiev Codes

JavaScript Dom Issues with the code

1 Answer

Zimri Leijen

Zimri Leijen

Tadjiev Codes

Tadjiev Codes

Zimri Leijen

Zimri Leijen