Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 29.04.2023, 21:32   #1
gimes
Пользователь
 
Регистрация: 17.01.2022
Сообщений: 58
Вопрос Как сделать пункты с галочками для браузера на основе множеств?

Прошу помочь с написанием учебного примера, например в виде html страницы.
Надо сделать слова рядом с галочками. Например в столбик:
молоко "поле для галочки"
чайная заварка "поле для галочки"
какао "поле для галочки"
кофейный порошок "поле для галочки"
сахар "поле для галочки"
мороженное "поле для галочки"
сок "поле для галочки"
Снизу кнопка Анализировать.
Если поставить галочки на молоко, сахар, "кофейный порошок", то после нажатия кнопки Анализировать должно вывести "Кофе с молоком".
При выборе какао, сахар, молоко должно вывести "Какао напиток"
При выборе сахар, молоко должно вывести:
"Кофе с молоком" или "Какао напиток". То есть прямо оба значения чтобы отобразилось одновременно и между ними слово или. Перед выводом результат должен заносится в переменную, чтобы если захочется использовать его в другом виде, чтобы можно было взять оттуда.
Мороженное и сок для множества Коктейль.
gimes вне форума Ответить с цитированием
Старый 30.04.2023, 16:32   #2
Agency
Пользователь
 
Регистрация: 07.10.2017
Сообщений: 99
По умолчанию

Тут много нюансов, надо разбираться с логикой.
например, если к "молоко", "сахар", "кофейный порошок" добавить "сок", что должно выдаваться?
Напиши в личку или на сайт, обсудим...
Agency вне форума Ответить с цитированием
Старый 30.04.2023, 17:05   #3
gimes
Пользователь
 
Регистрация: 17.01.2022
Сообщений: 58
По умолчанию

Должно выдаваться "Результат отсутствует".
gimes вне форума Ответить с цитированием
Старый 01.05.2023, 02:44   #4
BDA
МегаМодератор
СуперМодератор
 
Аватар для BDA
 
Регистрация: 09.11.2010
Сообщений: 7,285
По умолчанию

Код:
<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>
Вроде работает, но алгоритм, скорее всего, далек от оптимального.
Пишите язык программирования - это форум программистов, а не экстрасенсов. (<= это подпись )
BDA вне форума Ответить с цитированием
Старый 01.05.2023, 14:05   #5
Agency
Пользователь
 
Регистрация: 07.10.2017
Сообщений: 99
По умолчанию

Да, код не идеален, но это не самое страшное
Всегда есть что улучшить.
Я бы ингредиенты вынес в отдельный массив, чтобы избавиться от дублирования.
Agency вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтобы проверялись все пункты? 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