stackoom
  简体   繁体   中英

how to create buttons that each one when clicked display a different set of buttons?

 原文  2020-05-23 21:57:39  2   1    javascript/ c#/ html

Question

so I'm new to HTML and JavaScript and I'm trying to create a container of buttons that when clicked display a different container of buttons, that way the only buttons displayed in the second container are those related to the button clicked. the second buttons are supposed to add an item with the text of the button to an ordered list. I created 2 classes in c# one is called Dish with the fields name and price and the other is called Category with the fields name and a list of dishes . The buttons on the top are supposed to be of the categories and those on the bottom of the dishes within the category. I created arrays in javascript that contain the dishes(each element is a category) and put them in an array containing all the categories. for some reason, only the category buttons are showing up and when clicked are not displaying the buttons of the dishes. I can't be sure but, believe the issue is when I call the function "createbuttons" and the parameter I'm sending it. It may be that, the way I'm going about this is entirely wrong or it may be a silly mistake. I would appreciate any help or advice and if something wasn't clear please let me know so I can fix it. TIA!!!!
ps the names are in Hebrew I hope that's OK

Dish-class:

public class Dish
    {
        public string name;
        public int price;

        public Dish(string Name, int Price)
        {
            name = Name;
            price = Price;
        }

        public string Name { get; set; }
        public int Price { get; set; }
    }
}

category-class

public class category
    {
        public string name;
        public IList<Dish> dishes;

        public category(string Name, IList<Dish> Dishes)
        {
            name = Name;
            IList<Dish> dishes = Dishes;
        }

        public string Name { get; set; }
        public IList<Dish> Dishes { get; set; }
    }

the code in view

<style>
        .categories-buttons {
            display: grid;
            grid-template-columns: repeat(5, minmax(120px, 1fr));
            grid-gap: 0px;
            top: 0;
        }

        .dishes-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            top: 50px;
        }

        .topButtons {
            background-color: lightseagreen;
            padding: 25px;
            /*border: 1px solid lime;*/
            color: black;
            text-align: center;
            display: inline-block;
            font-size: 20px;
            border-radius: 8px;
            transition-duration: 0.5s;
        }
        .topButtons:hover {
            background-color: white;
            color: black;
        }

         .topButtons:active {
              background-color: white;
              box-shadow:0 5px #666;
              transform: translateY(4px);
            }


        .bottomButtons {
            background-color: darkcyan;
            padding: 25px;
            border: 1px solid sienna;
            color: white;
            text-align: center;
            display: inline-block;
            font-size: 20px;
        }


        .order {
            position: relative;
            float: right;
            top: 0;
            height: 350px;
            overflow: scroll;

        }


        .rightside {
            display: grid;
            grid-template-columns: auto;
            float: right;
            width: 20%;
        }

        .leftside {
            display: grid;
            grid-template-columns: auto;
            float: left;
            grid-row-gap: 60px;
            width: 50%;
        }

        .totalLine {
            border: 1px solid black;
            border-radius: 5px;
            float: right;
            top: 20px;

        }
    </style>
<body style="background-color:lightgray;">

    <div class="rightside">

        <ol class="order" id="listOfOrder"></ol>

        <div class="totalLine">total:      </div>
    </div>

    <div class="leftside">
        <div class="categories-buttons"></div>

        <div class="dishes-buttons" id="bottom"></div>
    </div>

    <script>

        var saladsDishes = [];

        saladsDishes.push({name: 'סלט בטטה', price: 76});
        saladsDishes.push({ name: 'סלט טוסט', price: 76 });
        saladsDishes.push({ name: 'סלט חלומי', price: 76 });
        saladsDishes.push({ name: 'סלט פאטוש', price: 76 });
        saladsDishes.push({ name: 'סלט טונה', price: 76 });

        var salads = { name: 'סלטים', dishes: saladsDishes };

        var italianDishes = [];

        italianDishes.push({ name: 'פנה', price: 76 });
        italianDishes.push({ name: 'ספגטי', price: 76 });
        italianDishes.push({ name: 'פפרדלה', price: 76 });
        italianDishes.push({ name: 'רביולי בטטה', price: 76 });
        italianDishes.push({ name: 'רביולי גבינות', price: 76 });
        italianDishes.push({ name: 'פיצה', price: 76 });

        var italian = { name: 'איטלקי', dishes: italianDishes };

        var sandwichesDishes = [];

        sandwichesDishes.push({ name: 'כריך חביתה', price: 76 });
        sandwichesDishes.push({ name: 'כריך אבוקדו', price: 76 });
        sandwichesDishes.push({ name: 'כריך סלמון', price: 76 });
        sandwichesDishes.push({ name: 'כריך טונה', price: 76 });
        sandwichesDishes.push({ name: 'כריך חלומי', price: 76 });
        sandwichesDishes.push({ name: 'טוסט', price: 76 });
        sandwichesDishes.push({ name: 'טוסט גבינות', price: 76 });

        var sandwiches = { name: 'כריכים', dishes: sandwichesDishes };

        var breakfestDishes = [];

        breakfestDishes.push({ name: 'ארוחת בוקר יחיד', price: 76 });
        breakfestDishes.push({ name: 'ארוחת בוקר זוגית', price: 76 });
        breakfestDishes.push({ name: 'בוקר ספרדי', price: 76 });
        breakfestDishes.push({ name: 'כריכון וקפה', price: 76 });
        breakfestDishes.push({ name: 'קפה ומאפה', price: 76 });

        var breakfest = { name: 'ארוחות בוקר', dishes: breakfestDishes };

        var appetizerDishes = [];

        appetizerDishes.push({ name: 'פסטייה', price: 76 });
        appetizerDishes.push({ name: 'סמוסה', price: 76 });
        appetizerDishes.push({ name: 'פרחי כרובית', price: 76 });
        appetizerDishes.push({ name: 'לביבות ברוקולי', price: 76 });
        appetizerDishes.push({ name: 'חציל שרןף', price: 76 });
        appetizerDishes.push({ name: 'מרק הבית', price: 76 });

        var appetizers = { name: 'מנות פתיחה', dishes: appetizerDishes };

        var allColdDrinks = [];

        allColdDrinks.push({ name: 'קולה', price: 76 });
        allColdDrinks.push({ name: 'ספרייט', price: 76 });
        allColdDrinks.push({ name: 'פאנטה', price: 76 });
        allColdDrinks.push({ name: 'פיוז-טי', price: 76 });
        allColdDrinks.push({ name: 'סודה', price: 76 });
        allColdDrinks.push({ name: 'מים מינרליים', price: 76 });

        var coldDrinks = { name: 'שתייה קרה', dishes: allColdDrinks };

        var allCategories = [];
        allCategories.push(salads, italian, sandwiches, breakfest, appetizers, coldDrinks);




        function createListItem(ButtonText) {

            var list = document.getElementsByClassName("order")[0];
            var listItem = document.createElement('li');
            listItem.appendChild(document.createTextNode(ButtonText));
            list.appendChild(listItem);
        }



        function createbuttons(k) {
            document.getElementById("bottom").innerHTML = "";
            var x = document.getElementsByClassName("dishes-buttons")[0];

            for (var i = 0; i < k.length; i++) {

                var btn = document.createElement("button");
                btn.innerText = k[i].name;
                btn.className = "bottomButtons";
                btn.onclick = function () { createListItem(btn.textContent) };
                x.append(btn);
            }
        }



        var div = document.getElementsByClassName("categories-buttons")[0];

        for (var i = 0; i < allCategories.length; i++) {
            var btn = document.createElement("button");
            btn.innerText = allCategories[i].name;
            btn.className = "topButtons";
            btn.onclick = function () { createbuttons(allCategories[i].dishes) };
            div.append(btn);
        }
    </script>
</body>

1 answers

solution1
 0 ACCPTED  2020-05-24 10:17:03

It's a scope issue. Your variable i was always 6 and exceeds the array length when clicking on a button. You need to use let in that case:

for (let i = 0; i < allCategories.length; i++) {
    var btn = document.createElement("button");
    btn.innerText = allCategories[i].name;
    btn.className = "topButtons";
    btn.onclick = function () { createbuttons(allCategories[i].dishes) };
    div.append(btn);
}


 var saladsDishes = []; saladsDishes.push({ name: 'סלט בטטה', price: 76 }); saladsDishes.push({ name: 'סלט טוסט', price: 76 }); saladsDishes.push({ name: 'סלט חלומי', price: 76 }); saladsDishes.push({ name: 'סלט פאטוש', price: 76 }); saladsDishes.push({ name: 'סלט טונה', price: 76 }); var salads = { name: 'סלטים', dishes: saladsDishes }; var italianDishes = []; italianDishes.push({ name: 'פנה', price: 76 }); italianDishes.push({ name: 'ספגטי', price: 76 }); italianDishes.push({ name: 'פפרדלה', price: 76 }); italianDishes.push({ name: 'רביולי בטטה', price: 76 }); italianDishes.push({ name: 'רביולי גבינות', price: 76 }); italianDishes.push({ name: 'פיצה', price: 76 }); var italian = { name: 'איטלקי', dishes: italianDishes }; var sandwichesDishes = []; sandwichesDishes.push({ name: 'כריך חביתה', price: 76 }); sandwichesDishes.push({ name: 'כריך אבוקדו', price: 76 }); sandwichesDishes.push({ name: 'כריך סלמון', price: 76 }); sandwichesDishes.push({ name: 'כריך טונה', price: 76 }); sandwichesDishes.push({ name: 'כריך חלומי', price: 76 }); sandwichesDishes.push({ name: 'טוסט', price: 76 }); sandwichesDishes.push({ name: 'טוסט גבינות', price: 76 }); var sandwiches = { name: 'כריכים', dishes: sandwichesDishes }; var breakfestDishes = []; breakfestDishes.push({ name: 'ארוחת בוקר יחיד', price: 76 }); breakfestDishes.push({ name: 'ארוחת בוקר זוגית', price: 76 }); breakfestDishes.push({ name: 'בוקר ספרדי', price: 76 }); breakfestDishes.push({ name: 'כריכון וקפה', price: 76 }); breakfestDishes.push({ name: 'קפה ומאפה', price: 76 }); var breakfest = { name: 'ארוחות בוקר', dishes: breakfestDishes }; var appetizerDishes = []; appetizerDishes.push({ name: 'פסטייה', price: 76 }); appetizerDishes.push({ name: 'סמוסה', price: 76 }); appetizerDishes.push({ name: 'פרחי כרובית', price: 76 }); appetizerDishes.push({ name: 'לביבות ברוקולי', price: 76 }); appetizerDishes.push({ name: 'חציל שרןף', price: 76 }); appetizerDishes.push({ name: 'מרק הבית', price: 76 }); var appetizers = { name: 'מנות פתיחה', dishes: appetizerDishes }; var allColdDrinks = []; allColdDrinks.push({ name: 'קולה', price: 76 }); allColdDrinks.push({ name: 'ספרייט', price: 76 }); allColdDrinks.push({ name: 'פאנטה', price: 76 }); allColdDrinks.push({ name: 'פיוז-טי', price: 76 }); allColdDrinks.push({ name: 'סודה', price: 76 }); allColdDrinks.push({ name: 'מים מינרליים', price: 76 }); var coldDrinks = { name: 'שתייה קרה', dishes: allColdDrinks }; var allCategories = []; allCategories.push(salads, italian, sandwiches, breakfest, appetizers, coldDrinks); function createListItem(ButtonText) { var list = document.getElementsByClassName("order")[0]; var listItem = document.createElement('li'); listItem.appendChild(document.createTextNode(ButtonText)); list.appendChild(listItem); } function createbuttons(k) { document.getElementById("bottom").innerHTML = ""; var x = document.getElementsByClassName("dishes-buttons")[0]; for (var i = 0; i < k.length; i++) { var btn = document.createElement("button"); btn.innerText = k[i].name; btn.className = "bottomButtons"; btn.onclick = function() { createListItem(btn.textContent) }; x.append(btn); } } var div = document.getElementsByClassName("categories-buttons")[0]; for (let i = 0; i < allCategories.length; i++) { var btn = document.createElement("button"); btn.innerText = allCategories[i].name; btn.className = "topButtons"; btn.onclick = function() { createbuttons(allCategories[i].dishes) }; div.append(btn); }
 .categories-buttons { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); grid-gap: 0px; top: 0; }.dishes-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); top: 50px; }.topButtons { background-color: lightseagreen; padding: 25px; /*border: 1px solid lime;*/ color: black; text-align: center; display: inline-block; font-size: 20px; border-radius: 8px; transition-duration: 0.5s; }.topButtons:hover { background-color: white; color: black; }.topButtons:active { background-color: white; box-shadow: 0 5px #666; transform: translateY(4px); }.bottomButtons { background-color: darkcyan; padding: 25px; border: 1px solid sienna; color: white; text-align: center; display: inline-block; font-size: 20px; }.order { position: relative; float: right; top: 0; height: 350px; overflow: scroll; }.rightside { display: grid; grid-template-columns: auto; float: right; width: 20%; }.leftside { display: grid; grid-template-columns: auto; float: left; grid-row-gap: 60px; width: 50%; }.totalLine { border: 1px solid black; border-radius: 5px; float: right; top: 20px; }
 <div class="rightside"> <ol class="order" id="listOfOrder"></ol> <div class="totalLine">total: </div> </div> <div class="leftside"> <div class="categories-buttons"></div> <div class="dishes-buttons" id="bottom"></div> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to display one set of buttons when I click on one button of the main set/array of buttons How to display each buttons in one function in JavaScript Multiple buttons; Each one needs to display different text How to separate function execution when different buttons are clicked Accordion menu - how to stop all buttons opening when one is clicked? How to remove the event listeners of all buttons when only one is clicked How do you hide two buttons when one button is clicked? How to get all buttons disabled, when one button is clicked in react? Disable remaining buttons when one is clicked Disable 2 buttons when one is clicked using angularjs
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM