The code combines a combination of numbers from 1 to 25, 5 digits per combination. How to circle each number in div block?

function generate() { const numbers = (new Array(25)).fill(1).map((a, i) => a + i); let resultSet = new Map(); while (resultSet.size < 1000) { let nums = shuffle(numbers).slice(0, 5); let key = (nums.sort() + ''); resultSet.set(key, nums); } resultSet.forEach(val => document.write(val.join('-') + '<br>', )); } function shuffle(arr) { return arr.map(el => { return { item: el, sort: Math.random() } }).sort((a, b) => a.sort - b.sort).map(el => el.item); } 
 <input type="button" value="Нажать" onclick="generate()"/>

    1 answer 1

     function generate() { const numbers = (new Array(25)).fill(1).map((a, i) => a + i); let resultSet = new Map(); while (resultSet.size < 1000) { let nums = shuffle(numbers).slice(0, 5); let key = (nums.sort() + ''); resultSet.set(key, nums); } resultSet.forEach(val => { const main = createDivWithContent(val.join('-'), "one"); const additional = createDivWithContent(randInt(), "two"); main.append(additional); document.body.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 randInt(min = 1, max = 4) { return Math.floor(Math.random() * (max - min + 1)) + min; } function createDivWithContent(content, className) { const divEl = document.createElement("DIV"); divEl.className = className || ""; divEl.append(content); return divEl; } 
     .one { color: grey; } .two { color: blue; display: inline-block; } 
     <input type="button" value="Нажать" onclick="generate()"/>

    • So I will not be able to assign a diva style. - Arcadiy
    • Do you want the styles for each diva separately or does the use of one class for all suit? - Alexandr Tovmach
    • you can have one for everyone, except this randInt (min = 1, max = 4) for her, a separate style is needed - Arcadiy
    • Updated, now you can transfer the name of the class - Alexandr Tovmach
    • Everything is fine, only now .two goes to the line below, but it should be all on one line. It turns out .one and .two are not additionally wrapped in a common div Arcadiy