Как сделать пункты с галочками для браузера на основе множеств? - JavaScript, Ajax

gimes · 29.04.2023, 21:32

Прошу помочь с написанием учебного примера, например в виде html страницы.
Надо сделать слова рядом с галочками. Например в столбик:
молоко "поле для галочки"
чайная заварка "поле для галочки"
какао "поле для галочки"
кофейный порошок "поле для галочки"
сахар "поле для галочки"
мороженное "поле для галочки"
сок "поле для галочки"
Снизу кнопка Анализировать.
Если поставить галочки на молоко, сахар, "кофейный порошок", то после нажатия кнопки Анализировать должно вывести "Кофе с молоком".
При выборе какао, сахар, молоко должно вывести "Какао напиток"
При выборе сахар, молоко должно вывести:
"Кофе с молоком" или "Какао напиток". То есть прямо оба значения чтобы отобразилось одновременно и между ними слово или. Перед выводом результат должен заносится в переменную, чтобы если захочется использовать его в другом виде, чтобы можно было взять оттуда.
Мороженное и сок для множества Коктейль.

Agency · 30.04.2023, 16:32

Тут много нюансов, надо разбираться с логикой.
например, если к "молоко", "сахар", "кофейный порошок" добавить "сок", что должно выдаваться?
Напиши в личку или на сайт, обсудим...

gimes · 30.04.2023, 17:05

Должно выдаваться "Результат отсутствует".

BDA · 01.05.2023, 02:44

Код:

<html>
    <body onload="loaded();"></body>
    <script>
    const products = [
        ["Кофе с молоком", new Set(["молоко", "сахар", "кофейный порошок"])],
        ["Какао напиток", new Set(["молоко", "сахар", "какао"])],
        ["Коктейль", new Set(["мороженное", "сок"])],
        ["Чай с сахаром", new Set(["чайная заварка", "сахар"])]
    ];

    function isSuperset(set, subset) {
        for (const elem of subset) {
            if (!set.has(elem)) {
                return false;
            }
        }
        return true;
    }

    function loaded() {
        const subproducts = new Set();
        for (const product of products) {
            for (const subproduct of product[1]) {
                subproducts.add(subproduct);
            }
        }

        for (const subproduct of subproducts) {
            let input = document.createElement("input");
            input.setAttribute("type", "checkbox");
            input.setAttribute("value", subproduct);
            document.body.appendChild(input);

            let label = document.createElement("label");
            label.innerHTML = subproduct;
            document.body.appendChild(label);

            document.body.appendChild(document.createElement("br"));
        }

        let button = document.createElement("button");
        button.innerHTML = "Анализировать";
        button.addEventListener("click", function () {
            var checked = document.querySelectorAll("input:checked");
            var result = document.getElementById("result");
            if (checked.length === 0) {
                result.innerHTML = "Выберите хотя бы один ингредиент";
            } else {
                let subproducts = new Set();
                for (const check of checked) {
                    subproducts.add(check.value);
                }

                let possible_products = [];
                for (const product of products) {
                    if (isSuperset(product[1], subproducts)) {
                        possible_products.push(product[0]);
                    }
                }

                if (possible_products.length == 0) {
                    result.innerHTML = "Нет продуктов из выбранных ингредиентов";
                } else {
                    result.innerHTML = possible_products.join(" ИЛИ ");
                }
            }
        });
        document.body.appendChild(button);

        let div = document.createElement("div");
        div.setAttribute("id", "result");
        document.body.appendChild(div);
    }
    </script>
</html>

Вроде работает, но алгоритм, скорее всего, далек от оптимального.

Agency · 01.05.2023, 14:05

Да, код не идеален, но это не самое страшное

Всегда есть что улучшить.
Я бы ингредиенты вынес в отдельный массив, чтобы избавиться от дублирования.

29.04.2023, 21:32	#1
gimes Пользователь Регистрация: 17.01.2022 Сообщений: 65	Как сделать пункты с галочками для браузера на основе множеств? Прошу помочь с написанием учебного примера, например в виде html страницы. Надо сделать слова рядом с галочками. Например в столбик: молоко "поле для галочки" чайная заварка "поле для галочки" какао "поле для галочки" кофейный порошок "поле для галочки" сахар "поле для галочки" мороженное "поле для галочки" сок "поле для галочки" Снизу кнопка Анализировать. Если поставить галочки на молоко, сахар, "кофейный порошок", то после нажатия кнопки Анализировать должно вывести "Кофе с молоком". При выборе какао, сахар, молоко должно вывести "Какао напиток" При выборе сахар, молоко должно вывести: "Кофе с молоком" или "Какао напиток". То есть прямо оба значения чтобы отобразилось одновременно и между ними слово или. Перед выводом результат должен заносится в переменную, чтобы если захочется использовать его в другом виде, чтобы можно было взять оттуда. Мороженное и сок для множества Коктейль.

30.04.2023, 16:32	#2
Agency Форумчанин Регистрация: 07.10.2017 Сообщений: 104	Тут много нюансов, надо разбираться с логикой. например, если к "молоко", "сахар", "кофейный порошок" добавить "сок", что должно выдаваться? Напиши в личку или на сайт, обсудим... http://a77r.ru

01.05.2023, 14:05	#5
Agency Форумчанин Регистрация: 07.10.2017 Сообщений: 104	Да, код не идеален, но это не самое страшное Всегда есть что улучшить. Я бы ингредиенты вынес в отдельный массив, чтобы избавиться от дублирования. http://a77r.ru

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как сделать, чтобы проверялись все пункты?	himecu	Помощь студентам	0	02.12.2022 14:18
При уменьшении размера браузера и разрешении <=1024x768 пункты меню вместе с контактами справа уезжают вниз.	allseo	HTML и CSS	1	30.09.2018 19:53
Из множества конечных множеств выделить подмножество из наибольшего количества попарно непересекающихся множеств(Maple или Паскаль	Моника	Помощь студентам	0	28.04.2014 23:18
Как сделать загрузку браузера.	Dryn9	Помощь студентам	1	14.12.2012 06:30
Меню как в Office с галочками	Gulik	Общие вопросы Delphi	2	04.05.2009 23:50

30.04.2023, 17:05	#3
gimes Пользователь Регистрация: 17.01.2022 Сообщений: 65	Должно выдаваться "Результат отсутствует".