html Div with javascript numerical widgets

Question

I want to create It dynamically by providing n n=total number for example in above image n=30

I want to make it in html, using jquery or javascript and its not a keypad moreof a counter of how many questions are inserte and how many left.

Check jquery plugins: https://www.jqueryscript.net/tags.php?/Keypad/ — Oleg, Apr 30 '22 at 07:40

score 1 · Answer 1 · answered Apr 30 '22 at 08:00

Using CSS grid:

const widgetContainer = document.getElementById("widget-container");

let n = 30;

for (i = 1; i <= n; i++) {
    widgetContainer.innerHTML += "<button>" + i + "</button>";
}

div#widget-container {
    display: grid;
    grid-template-columns: repeat(6, calc(100%/6));
    grid-gap: 5px;
    max-width: 250px;
}

div#widget-container>* {
    display: flex;
    justify-content: center;
    border: 1px solid black;
    align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="widget-container">
    </div>
</body>
</html>

Hi. [Just so you know about the problems with innerHTML concatenation](https://stackoverflow.com/a/11515395/1377002). — Andy, Apr 30 '22 at 09:19
Thanks for pointing out @Andy. I am aware of the innerHTML problems and XSS vulnerabilities. This was just a demo/proof of concept. — Lakshaya U., May 01 '22 at 07:52

Andy · Answer 2 · 2022-04-30T09:17:23.360

This is pretty simple to do with CSS Grid, and some JavaScript.

Create a function that accepts a number, and loops until that number creating an HTML string on each iteration. It places each string into an array, and then returns the joined array as a string of HTML.

That HTML string is added to a container that uses Grid to display the HTML.

Since this isn't a keypad you can add a supplementary data attribute to each element so you can target them separately if you need to.

function createButtons(n) {

  // Create an array
  const html = [];

  // Push HTML into the array on each iteration
  // Each button has its own data id
  // Note: I've used a button here because they're
  // easier to style
  for (let i = 1; i <= n; i++) {
    html.push(`<button data-id="${i}" class="pad" disabled>${i}</button>`);
  }

  // Return the joined-up array as a string
  return html.join('');

}

// Select the container, and add the result
// of calling the function as its innerHTML
const grid = document.querySelector('.grid');
grid.innerHTML = createButtons(30);

// Set the count, and grab all the buttons
const count = 7;
const buttons = document.querySelectorAll('.pad');

// Now you can loop over the button collection, and
// add an active class to each button in the loop...
for (let i = 0; i < count; i++) {
  buttons[i].classList.add('active');
}

//...or activate them seperately
const eighteen = document.querySelector('.pad[data-id="18"]');
eighteen.classList.add('active');

.grid { display: grid; width: 250px; grid-template-columns: repeat(5, 1fr); row-gap: 0.6em;}
.pad { padding: 0.5em 0.2em; border-radius: 5px; color: red; border: 1px solid red; background-color: white; width: 40px;}
.active { background-color: lightblue; color: black; }

<div class="grid"></div>

html Div with javascript numerical widgets

2 Answers2