<!DOCTYPE html>
<html lang="cs">
 
<head>
    <meta charset="utf-8" />
    <title>Čísla</title>
    <style>
        .cislo {
            border: 1px solid black;
            padding: 1rem;
            display: inline-block;
            margin: 2rem;
            color: purple;
            background-color: greenyellow;
            font-size: 40pt;
            font-weight: bold;
            font-family: "Times New Roman", serif;
            font-weight: bold;
            letter-spacing: 0em;
            line-height: 120%;
            text-shadow: red 0px 0px 10px, yellow 1px 1px 1px;
            word-spacing: 0.2em;
            text-transform: uppercase;
            -webkit-text-stroke-width: 2px;
            -webkit-text-stroke-color: black;
        }
 
        .cislo2 {
            color: blue;
            background-color: pink;
        } 
 
        .cislo3 {
            color: rgb(200, 100, 255);
            background-color: yellow;
        }
 
        .cislo4 {
            color: rgb(200, 100, 255);
            background-color: red;
            -webkit-text-stroke-color: pink;
        }
 
        .cislo5 {
            color: rgb(30, 205, 30);
            background-color: rgb(38, 12, 12);
            -webkit-text-stroke-color: white;
        }
    </style>
</head>
<body>
    <div id="output"></div>
 
    <script>
        const barvyPozadiCisel = []
        const barvyCisel = []
 
        barvyPozadiCisel[15] = 'red'
        barvyPozadiCisel[16] = 'green'
 
        barvyCisel[15] = 'white'
        barvyCisel[16] = 'white'
 
 
        function randomColor(){
            const red = Math.floor(Math.random()*256)
            const green = Math.floor(Math.random()*256)
            const blue = Math.floor(Math.random()*256)
 
            return "rgb("+red+","+green+","+blue+")"
        }
 
        const HORNI_MEZ = 1000
            for (let cislo = 1; cislo <= HORNI_MEZ; cislo++) {
                const obalkaCisla = document.createElement("div")
                obalkaCisla.innerHTML = cislo
                obalkaCisla.classList.add("cislo")
                obalkaCisla.classList.add("cislo" + cislo)
 
                if(barvyCisel[cislo]) {
                    obalkaCisla.style.color = barvyCisel[cislo]
                } else {
                    obalkaCisla.style.color = randomColor()
                }
 
                if(barvyPozadiCisel[cislo]) {
                    obalkaCisla.style.backgroundColor = barvyPozadiCisel[cislo]
                } else {
                    obalkaCisla.style.backgroundColor = randomColor()
                }
                document.getElementById("output").append(obalkaCisla)
 
                //document.getElementById("output").innerHTML += "<div class='cislo cislo"+cislo+"'>" + cislo + "</div>"
            }
    </script>
</body>
 
</html>

Formulář na změnu

<!DOCTYPE html>
<html lang="cs">
 
<head>
    <meta charset="utf-8" />
    <title>Čísla</title>
    <style>
        .cislo {
            border: 1px solid black;
            padding: 1rem;
            display: inline-block;
            margin: 2rem;
            color: purple;
            background-color: greenyellow;
            font-size: 40pt;
            font-weight: bold;
            font-family: "Times New Roman", serif;
            font-weight: bold;
            letter-spacing: 0em;
            line-height: 120%;
            text-shadow: red 0px 0px 10px, yellow 1px 1px 1px;
            word-spacing: 0.2em;
            text-transform: uppercase;
            -webkit-text-stroke-width: 2px;
            -webkit-text-stroke-color: black;
        }
 
        .cislo2 {
            color: blue;
            background-color: pink;
        } 
 
        .cislo3 {
            color: rgb(200, 100, 255);
            background-color: yellow;
        }
 
        .cislo4 {
            color: rgb(200, 100, 255);
            background-color: red;
            -webkit-text-stroke-color: pink;
        }
 
        .cislo5 {
            color: rgb(30, 205, 30);
            background-color: rgb(38, 12, 12);
            -webkit-text-stroke-color: white;
        }
    </style>
</head>
<body>
    <button onclick="vygeneruj()">Vygeneruj</button>
 
    <div>
        <p><label for="cislo">Číslo</label>
            <input id="cislo" name="cislo" type="number"></p>
        <p><label for="barva">Barva</label>
            <input id="barva" name="barva"></p>    
            <p><label for="barvaPozadi">Barva pozadí</label>
                <input id="barvaPozadi" name="barvaPozadi"></p>
 
        <button onclick="uloz()">Ulož</button>
    </div>
    <div id="output"></div>
 
 
    <script>
        const barvyPozadiCisel = []
        const barvyCisel = []
 
        barvyPozadiCisel[15] = 'red'
        barvyPozadiCisel[16] = 'green'
 
        barvyCisel[15] = 'white'
        barvyCisel[16] = 'white'
 
 
        function randomColor(){
            const red = Math.floor(Math.random()*256)
            const green = Math.floor(Math.random()*256)
            const blue = Math.floor(Math.random()*256)
 
            return "rgb("+red+","+green+","+blue+")"
        }
 
        function uloz(){
            // Načti hodnoty z formuláře
            const cislo = parseInt(document.getElementById("cislo").value)
            const barva = document.getElementById("barva").value
            const barvaPozadi = document.getElementById("barvaPozadi").value
 
            console.log(`${cislo} bude ${barva} a pozadi ${barvaPozadi}`)
 
            barvyCisel[cislo] = barva
            barvyPozadiCisel[cislo] = barvaPozadi
        }
 
        function vygeneruj() {
            // Smaz co tam je
            document.getElementById("output").innerHTML = ""
 
            const HORNI_MEZ = 20
                for (let cislo = 1; cislo <= HORNI_MEZ; cislo++) {
                    const obalkaCisla = document.createElement("div")
                    obalkaCisla.innerHTML = cislo
                    obalkaCisla.classList.add("cislo")
                    obalkaCisla.classList.add("cislo" + cislo)
 
                    if(barvyPozadiCisel[cislo]) {
                        obalkaCisla.style.color = barvyCisel[cislo]
                    } else {
                        obalkaCisla.style.color = randomColor()
                    }
 
                    if(barvyPozadiCisel[cislo]) {
                        obalkaCisla.style.backgroundColor = barvyPozadiCisel[cislo]
                    } else {
                        obalkaCisla.style.backgroundColor = randomColor()
                    }
                    document.getElementById("output").append(obalkaCisla)
 
                    //document.getElementById("output").innerHTML += "<div class='cislo cislo"+cislo+"'>" + cislo + "</div>"
                }
        }
 
        vygeneruj()
    </script>
</body>
 
</html>