Dynamic generate sudoku board table using javascri

Question

I am trying to to generate a Sudoku board using this script:

The problem is that I don't know how to validate to generate unique numbers on columns and squares.

Actually is just validating and generating unique numbers only on rows.

Here is that code :

function generate(count, values) {
return Array.apply(null, { length: count }).map(function () {
    var r = [],
        array = values.slice();
    while (array.length) {
        r.push(array.splice(Math.floor(Math.random() * array.length), 1)[0]);
    }
    return r;
});
};

var myStringArray = generate(9, [1, 2, 3, 4, 5, 6, 7, 8, 9]);

Array.from(document.getElementsByClassName('cell')).forEach(function(e, i){
  var y = Math.floor(i/myStringArray.length);
  var x = i % myStringArray.length;
  e.textContent = myStringArray[y][x];

});

.container{
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items : center;
    justify-content : center;
    margin-bottom: 0;
}

.table {
    display:table;
    border: 2px solid #444;
    border-collapse: collapse;
    position: relative;
}
.row {
    display:table-row;
    position: relative;
    z-index:-1;
}
.cell {
    display:table-cell;
    padding:8px;
    border: 1px solid #ff0000;
    text-align: center;
}
.cell:nth-child(3), .cell:nth-child(6){border-right: 5px solid #555; } /*vertical*/
.row:nth-child(3) .cell, .row:nth-child(6) .cell{border-bottom: 5px solid #555;}  /*horizontal*/

.header {
text-align:center;
  position: relative;
}

.header {
 counter-increment: colno;                
}
.header::before {
  content: counter(colno); 
  position: absolute;
  top: -30px;
  font-weight:bold;
    color: #777;
}
.row:nth-child(n+1) {
    counter-increment: rowno;                
}
.row:nth-child(n+1)::before{
  content: counter(rowno); 
  position: absolute;
  left: -30px;
  top:10px;
  font-weight:bold;
  color: #777;
}

<div class="container">
<div class="table">
  <div id="mytab1" class="row">
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
    <span class="cell header">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  <div class="row">
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
    <span class="cell">***</span>
  </div>
  </div>
</div>

Please visit fiddle here

Appreciate your help, Thanks

Answer 1

You will need backtracking, because it is possible to add numbers to the Sudoku board which don't violate any rules immediately, but which will lead to a contradiction later on. If you take any unique-solution Sudoku problem and arbitrarily place any number anywhere, you are bound to experience just this.

I suggest you investigate the Dancing Links algorithm. You can easily formulate Sudoku as a set cover problem, and that algorithm can find a solution if there exists one. For the completely empty board, there has to be a solution. Randomize the matrix if you want to obtain a random result.

Also investigate all the other sudoku-tagged questions, since you are not the first trying to generate such boards, and translating from one language to another doesn't really change the game that much.