Форум

sochi-russia · #1 (**permalink**) 05.11.2022, 23:08

Здравствуйте, помогите пожалуйста
Есть код

function  generate() {
document.getElementById("Genone").innerHTML = "";
  const numbers = (new Array(37)).fill(1).map((a, i) => a + i);
  let resultSet = new Map();
   let qnt = parseInt(document.getElementById('quantity').value, 10);
  while (resultSet.size < qnt) {
let nums = shuffle(numbers).slice(0, 6);
let key = (nums.sort() + '');
resultSet.set(key, nums);
  }
  resultSet.forEach(val => {
const main = createTableWithContent(val.join('-'), "inone");
   document.getElementById("Genone").append(main);

   
  })
}

function shuffle(arr) {
  return arr.map(el => {
return {
  item: el,
  sort: Math.random()
}
  }).sort((a, b) => a.sort - b.sort).map(el => el.item);
}



function createTableWithContent(content, className) {
  const tableEl = document.createElement("TABLE");
  tableEl.className = className || "";
  tableEl.append(content);
  return tableEl;

}

<input id="quantity" type="text" placeholder="Кол-во комбинаций" style="background: #ffffff!important;color: #8f2d00!important;font-size: 20px!important;"/>
<input class="annoying-btn" type="button" value="Получить комбинации" onclick="generate()" />
<div id="Genone"></div>

Данный скрипт генерит 5 чисел из 37, создавая множество блоков с классом

inone

Как сделать так чтобы у каждой информации с классом

inone

справа появился чекбокс и если человек нажмет этот чекбокс, данный элемент удалялся, а где чекбокс не нажат эти блоки оставались?

рони · #2 (**permalink**) 05.11.2022, 23:45

sochi-russia,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script>
        function generate() {
            document.getElementById("Genone").innerHTML = "";
            let length = 37;
            const numbers = Array.from({length}, (a, i) => ++i);
            let resultSet = new Map();
            let qnt = parseInt(document.getElementById('quantity').value, 10);
            while (resultSet.size < qnt) {
                let nums = shuffle(numbers).slice(0, 6).sort((a, b)=> a - b);
                let key = nums.toString();
                resultSet.set(key, nums);
            }
            resultSet.forEach(val => {
                const main = createTableWithContent(val.join('-'), "inone");
                const checkbox = document.createElement("input");
                checkbox.type = "checkbox";
                checkbox.addEventListener("click", function() {
                main.remove();
                });
                main.append(checkbox);
                document.getElementById("Genone").append(main);
            })
        }
        function shuffle(arr) {
            return arr.sort( _ => Math.random() - .5);
        }
        function createTableWithContent(content, className = "") {
            const tableEl = document.createElement("TABLE");
            tableEl.className = className;
            tableEl.append(content);
            return tableEl;
        }
    </script>
</head>
<body>
    <input id="quantity" type="text" placeholder="Кол-во комбинаций" style="background: #ffffff!important;color: #8f2d00!important;font-size: 20px!important;" />
    <input class="annoying-btn" type="button" value="Получить комбинации" onclick="generate()" />
    <div id="Genone"></div>
</body>
</html>

sochi-russia · #3 (**permalink**) 05.11.2022, 23:52

Сообщение от рони

sochi-russia,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script>
        function generate() {
            document.getElementById("Genone").innerHTML = "";
            let length = 37;
            const numbers = Array.from({length}, (a, i) => ++i);
            let resultSet = new Map();
            let qnt = parseInt(document.getElementById('quantity').value, 10);
            while (resultSet.size < qnt) {
                let nums = shuffle(numbers).slice(0, 6).sort((a, b)=> a - b);
                let key = nums.toString();
                resultSet.set(key, nums);
            }
            resultSet.forEach(val => {
                const main = createTableWithContent(val.join('-'), "inone");
                const checkbox = document.createElement("input");
                checkbox.type = "checkbox";
                checkbox.addEventListener("click", function() {
                main.remove();
                });
                main.append(checkbox);
                document.getElementById("Genone").append(main);
            })
        }
        function shuffle(arr) {
            return arr.sort( _ => Math.random() - .5);
        }
        function createTableWithContent(content, className = "") {
            const tableEl = document.createElement("TABLE");
            tableEl.className = className;
            tableEl.append(content);
            return tableEl;
        }
    </script>
</head>
<body>
    <input id="quantity" type="text" placeholder="Кол-во комбинаций" style="background: #ffffff!important;color: #8f2d00!important;font-size: 20px!important;" />
    <input class="annoying-btn" type="button" value="Получить комбинации" onclick="generate()" />
    <div id="Genone"></div>
</body>
</html>

Спасибо большое, Вы супер профессионал!!!

Форум

Справочник

Discord чат

Курсы javascript