JavaScript

Tadjiev Codes
Tadjiev Codes
9,363 Points

JavaScript Dom Issues with the code

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))))

1 Answer

Zimri Leijen
Zimri Leijen
11,673 Points

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.

Tadjiev Codes
Tadjiev Codes
9,363 Points

Hey, Thank you soo much for this solution. So when you used 1: 2: 3: 4: before each object inside the orders variable. The calculation of these objects doesn't start from 0 but starts from 1 like you mentioned, right? And for text content again not to make it hardcoded you added those "orders[1].name" so like an array you called them kind of with dot notation and used the name of the object. Though I didn't understand this code : var totalOrders = Object.keys(orders).reduce((t, c) => t + (orders[c].amount * orders[c].price), 0); It looks like its an arrow function? I'll google it anyways. Object.keys sth new as well.

And I'll try to rewrite and make the code less to reduce repetition. And also i'll try to figure out how to reset the amount with objects.

Thanks a lot)))

Zimri Leijen
Zimri Leijen
11,673 Points

Correct, I made the object to start with 1, but you can make it start from 0 as well, like arrays, both will work.

As you can see all the items have their information in their own object now which is accessed by their ID to get the whole object of each item, and then dot notation for accessing a specific value such as the price or the name of the item.

The totalAmount is indeed an arrow function that recalculates the price whenever it is called.

It uses an array method called reduce, which is a method that is build in to javascript and is often used to combine multiple values from an array to arrive at 1 single number (often by adding them together, but it depends on what function you define within the callback of the reduce method)

In this specific case I looped over the keys of the object (the keys being the ID of each menu item) so that I can access each menu item one by one. Then for each item I multiply the amount of times the item was order by the price of the item, and add that to the total.

For clarity, the t in the arrow function stands for "total", which is a temporary value that stores the accumulated value of the numbers we are counting (this is also what the function will return when it is done counting) while the c stands for "current" as in the current item to be accessed in order to be counted.

I hope that makes it clearer.