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

gimes · 02.06.2023, 06:19

Программа для Windows (помогли с написанием промежуточного прототипа для более сложного проекта). В Chrome на Андроид не отображаются чекбоксы и кнопка не нажимается.
index.html:

Код:

<!DOCTYPE html>
<html>
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=2" />
<title>Рецепты</title>
        <style>
 
        </style>

  </head>
  <body>
    <div id="table-container"></div>
    <button id="analyze">Анализировать</button>
    <p id="answer"></p>
    <script src="index.js"></script>
  </body>

index.js:

Код:

const ingredients = [
  { id: "milk", name: "Молоко" },
  { id: "tea", name: "Чайная заварка" },
  { id: "cocoa", name: "Какао" },
  { id: "coffee", name: "Кофейный порошок" },
  { id: "sugar", name: "Сахар" },
  { id: "ice-cream", name: "Мороженое" },
  { id: "juice", name: "Сок" },
];
 
const recipes = [
  { name: "Кофе с молоком", ingredients: ["milk", "coffee", "sugar"] },
  { name: "Какао-напиток", ingredients: ["milk", "cocoa", "sugar"] },
  { name: "Коктейль", ingredients: ["ice-cream", "juice"] },
];
 
const template = (ingredients) => `
  <table>
    <thead>
      <tr>
        <th>Ингредиент</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      ${ingredients
        .map(
          (ingredient) =>
            `<tr>
          <td><label for="ingredient-${ingredient.id}">${ingredient.name}</label></td>
          <td><input id="ingredient-${ingredient.id}" type="checkbox" data-id="${ingredient.id}" /></td>
        </tr>`
        )
        .join("")}
    </tbody>
  </table>
`;
 
const container = document.querySelector("#table-container");
const button = document.querySelector("#analyze");
const answer = document.querySelector("#answer");
 
container.innerHTML = template(ingredients);
 
button.addEventListener("click", () => {
  const selected = [...document.querySelectorAll("input[data-id]:checked")].map(
    (input) => input.dataset.id
  );
 
  const possibleRecipes = recipes.filter((recipe) => {
    const recipeSet = new Set(recipe.ingredients);
    for (let ingredient of selected) {
      if (!recipeSet.has(ingredient)) {
        return false;
      }
    }
 
    return true;
  });
 
  answer.innerText = possibleRecipes.length
    ? possibleRecipes.map((recipe) => `"${recipe.name}"`).join(" или ")
    : "Нет рецептов с такими ингредиентами";
});

gimes · 17.06.2023, 10:20

Упаковал в apk. Там работает.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как запустить андроид приложения в Браузере	Ципихович Эндрю	Общие вопросы по программированию, компьютерный форум	10	07.11.2016 14:23
Нажатие в браузере js кнопки	x_fray_x	Общие вопросы Delphi	0	05.02.2013 18:48
Нажатие кнопки в браузере (не webbrowser)	glebast	Работа с сетью в Delphi	5	11.03.2012 01:44
Как сделать так, чтобы в моем браузере новое окно страницы открывалось в моем-же браузере???	Somilya	Помощь студентам	6	22.12.2009 21:56

17.06.2023, 10:20	#2
gimes Пользователь Регистрация: 17.01.2022 Сообщений: 58	Упаковал в apk. Там работает.