Click here to Skip to main content
14,934,895 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello, this is my first post here and still learning about code. So in this case here, i need to have the result when i click order button with a same option it will multiply the price as i click the button how many times (example: clicking button 3 times at Fried Rice will count the initial price times 3). In this code when i click order button, it will display a divided text. Are there any suggestion what method i need to change here? (P.S : sorry if my breakdown code are messy, i haven't learn yet how to post properly here)

What I have tried:

HTML
<div class="container">
        <div class="container-fluid text-center">
            <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
            <br>
            <div class="row">
                <div class="col-md-6">
                    <select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
                        <option value="Food">Food</option>
                        <option value="Drink">Drink</option>
                    </select>
                </div>
                <br>
                <div class="col-md-6">
                    <select class="form-select form-select-lg mb-3" id="type_select"></select>
                </div>
            </div>
        </div>
    </div>
    <br>
    <button type="submit" class="btn btn-secondary">Order</button>
    <br>
    <br>
    <div class="result text-center"></div>


JavaScript
var data = {
            Food: [
                {
                    id: 1,
                    name: 'Fried Rice',
                    price: 10000
                },
                {
                    id: 2,
                    name: 'Fried Noodle',
                    price: 9000
                },
                {
                    id: 3,
                    name: 'Pancake',
                    price: 8500
                },
                {
                    id: 4,
                    name: 'French Fries',
                    price: 7500
                }
            ],
            Drink: [
                {
                    id: 1,
                    name: 'Cola',
                    price: 4600
                },
                {
                    id: 2,
                    name: 'Orange Juice',
                    price: 5400
                },
                {
                    id: 3,
                    name: 'Mineral Water',
                    price: 3500
                },
                {
                    id: 4,
                    name: 'Coffee',
                    price: 5800
                }
            ]
        }

        function handleChange() {
            var x = document.getElementById("category_select").value;

            var dataOptions = data[x]
            var dataSelect = document.getElementById('type_select')
            dataSelect.innerHTML = ''

            dataOptions.forEach(function (option) {
                var optionEle = document.createElement('option')
                optionEle.value = option.id
                optionEle.label = option.name
                optionEle.setAttribute('data-price', option.price)

                dataSelect.appendChild(optionEle)
            })

        }
        handleChange()

        $(document).ready(function () {
            var selectMenu = [];
            $("button").click(function () {
                selectMenu.push($("#type_select option:selected").attr('label') + " : Rp " + $("#type_select option:selected").data('price'));
                $(".result").html(selectMenu.join('<br>'));
            });
        });
Posted
Comments
Gerry Schmitz 9-Feb-21 13:29pm
   
If someone orders "3 fried rice", that's 3 items times the price of one item; you don't simply show a total without showing the number of items.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900