How to get the values of table input fields in a multi-D array

Question

I build a sudoku game using fully filled boards and using 2D arrays. The program picks randomly one board between the different boards. Then it removed randomly numbers from it. Now I am stuck at the final check of the sudoku solution. When I click on the finish button, the test should check if all the entered values in the input fields are similar to the values in the full board in the same cell. The problem is I can't get the value entered into the input field by the user. The code manages to compare all the other cells and returns true when similar to those of the full board, but regarding the values that the user fills it returns false no matter if the cell is empty or filled. It just cant detect the value entered by the user.

let sudoku1 = [
  [3, 8, 7, 4, 9, 1, 6, 2, 5],
  [2, 4, 1, 5, 6, 8, 3, 7, 9],
  [5, 6, 9, 3, 2, 7, 4, 1, 8],
  [7, 5, 8, 6, 1, 9, 2, 3, 4],
  [1, 2, 3, 7, 8, 4, 5, 9, 6],
  [4, 9, 6, 2, 5, 3, 1, 8, 7],
  [9, 3, 4, 1, 7, 6, 8, 5, 2],
  [6, 7, 5, 8, 3, 2, 9, 4, 1],
  [8, 1, 2, 9, 4, 5, 7, 6, 3],
];

let sudoku2 = [
  [5, 3, 4, 6, 7, 8, 9, 1, 2],
  [6, 7, 2, 1, 9, 5, 3, 4, 8],
  [1, 9, 8, 3, 4, 2, 5, 6, 7],
  [8, 5, 9, 7, 6, 1, 4, 2, 3],
  [4, 2, 6, 8, 5, 3, 7, 9, 1],
  [7, 1, 3, 9, 2, 4, 8, 5, 6],
  [9, 6, 1, 5, 3, 7, 2, 8, 4],
  [2, 8, 7, 4, 1, 9, 6, 3, 5],
  [3, 4, 5, 2, 8, 6, 1, 7, 9],
];

let sudoku3 = [
  [7, 3, 5, 6, 1, 4, 8, 9, 2],
  [8, 4, 2, 9, 7, 3, 5, 6, 1],
  [9, 6, 1, 2, 8, 5, 3, 7, 4],
  [2, 8, 6, 3, 4, 9, 1, 5, 7],
  [4, 1, 3, 8, 5, 7, 9, 2, 6],
  [5, 7, 9, 1, 2, 6, 4, 3, 8],
  [1, 5, 7, 4, 9, 2, 6, 8, 3],
  [6, 9, 4, 7, 3, 8, 2, 1, 5],
  [3, 2, 8, 5, 6, 1, 7, 4, 9],
];
window.onload = function () {
  pickRandomSudoku();
  random(1, sudoku);
  fillEmptySudoku(sudoku);
};

//remove numbers from table
const random = (notVisible, sudoku) => {
  for (let i = 0; i < notVisible; i++) {
    let row = Math.floor(Math.random() * 9);
    let col = Math.floor(Math.random() * 9);

    if (sudoku[row][col] !== null) {
      sudoku[row][col] = null;
    } else {
      notVisible++;
    }
  }
  sudoku;
};

//map the matrix values into the html table
function fillEmptySudoku(sudoku) {
  let table = document.getElementById("table");

  for (let i = 0; i < table.rows.length; i++) {
    for (let j = 0; j < table.rows[i].cells.length; j++) {
      if (sudoku[i][j] === null) {
        table.rows[i].cells[j].setAttribute("contenteditable", "true");
      } else {
        table.rows[i].cells[j].textContent = sudoku[i][j];
      }
    }
  }
}

//Pick random table between sudoku1, sudoku2,sudoku3
const pickRandomSudoku = () => {
  let sudokuBoards = [sudoku1, sudoku2, sudoku3];
  num = Math.floor(Math.random() * sudokuBoards.length); // get a random number between 0-2
  sudoku = sudokuBoards[num]; //choose element at random index inside the array
  return sudoku;
};

//check if final board filled by user is valid
const isValid = () => {
  let sudoku1 = [
    [3, 8, 7, 4, 9, 1, 6, 2, 5],
    [2, 4, 1, 5, 6, 8, 3, 7, 9],
    [5, 6, 9, 3, 2, 7, 4, 1, 8],
    [7, 5, 8, 6, 1, 9, 2, 3, 4],
    [1, 2, 3, 7, 8, 4, 5, 9, 6],
    [4, 9, 6, 2, 5, 3, 1, 8, 7],
    [9, 3, 4, 1, 7, 6, 8, 5, 2],
    [6, 7, 5, 8, 3, 2, 9, 4, 1],
    [8, 1, 2, 9, 4, 5, 7, 6, 3],
  ];

  let sudoku2 = [
    [5, 3, 4, 6, 7, 8, 9, 1, 2],
    [6, 7, 2, 1, 9, 5, 3, 4, 8],
    [1, 9, 8, 3, 4, 2, 5, 6, 7],
    [8, 5, 9, 7, 6, 1, 4, 2, 3],
    [4, 2, 6, 8, 5, 3, 7, 9, 1],
    [7, 1, 3, 9, 2, 4, 8, 5, 6],
    [9, 6, 1, 5, 3, 7, 2, 8, 4],
    [2, 8, 7, 4, 1, 9, 6, 3, 5],
    [3, 4, 5, 2, 8, 6, 1, 7, 9],
  ];

  let sudoku3 = [
    [7, 3, 5, 6, 1, 4, 8, 9, 2],
    [8, 4, 2, 9, 7, 3, 5, 6, 1],
    [9, 6, 1, 2, 8, 5, 3, 7, 4],
    [2, 8, 6, 3, 4, 9, 1, 5, 7],
    [4, 1, 3, 8, 5, 7, 9, 2, 6],
    [5, 7, 9, 1, 2, 6, 4, 3, 8],
    [1, 5, 7, 4, 9, 2, 6, 8, 3],
    [6, 9, 4, 7, 3, 8, 2, 1, 5],
    [3, 2, 8, 5, 6, 1, 7, 4, 9],
  ];

  let table = document.getElementById("table");

  for (let i = 0; i < table.rows.length; i++) {
    for (let j = 0; j < table.rows[i].cells.length; j++) {
      if (
        table.rows[i].cells[j].innerText == sudoku1[i][j] ||
        table.rows[i].cells[j].innerText == sudoku2[i][j] ||
        table.rows[i].cells[j].innerText == sudoku3[i][j]
      ) {
        console.log(true);
      } else console.log(false);
    }
  }
};

<!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>Sudoku Game</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main id="main-holder">
      <h1 id="sudoku-title">Good Luck!</h1>

      <table id="table">
        <tr class="tr" id="row1">
          <td class="td" id="cell1">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell2">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell3">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell4">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell5">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell6">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell7">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell8">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell9">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
        </tr>

        <tr class="tr" id="row2">
          <td class="td" id="cell10">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell11">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell12">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell13">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell14">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell15">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell16">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell17">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td" id="cell18">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
        </tr>

        <tr class="tr" id="row3">
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
        </tr>

        <tr class="tr" id="row4">
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
        </tr>

        <tr class="tr" id="row5">
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
        </tr>

        <tr class="tr" id="row6">
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
        </tr>

        <tr class="tr" id="row7">
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
        </tr>

        <tr class="tr" id="row8">
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
        </tr>

        <tr class="tr" id="row9">
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
          <td class="td">
            <input type="number" min="1" max="9" step="1" class="inp" />
          </td>
        </tr>
      </table>

      <input
        type="submit"
        class="sudoku-btn"
        id="btn-end"
        value="Finish"
        onclick="isValid()"
      />
      <input type="submit" class="sudoku-btn" id="btn-new" value="New" />
      <input type="submit" class="sudoku-btn" id="btn-return" value="Levels" />
    </main>
    <script src="new-script.js"></script>
  </body>
</html>

Geshode · Accepted Answer · 2022-09-15 02:59:37Z

1

You are trying to get the value of

<input type="number" min="1" max="9" step="1" class="inp" />

with

table.rows[i].cells[j].innerText

But to get the value of an input, you need something like:

table.rows[i].cells[j].querySelector('input').value

or you could probably also use

table.rows[i].cells[j].children[0].value

So, your problem is, that you are trying to get the input value with the wrong method.

Edit: Now I realized, that you use innerText for existing numbers and input for the user input.

The following should work to get the input:

for (let i = 0; i < table.rows.length; i++) {
    for (let j = 0; j < table.rows[i].cells.length; j++) {
      let cellContent = table.rows[i].cells[j].innerText
      
      if (table.rows[i].cells[j].children[0]) {
        cellContent = table.rows[i].cells[j].children[0].value
      }
      
      if (
        cellContent == sudoku1[i][j] ||
        cellContent == sudoku2[i][j] ||
        cellContent == sudoku3[i][j]
      ) {
        console.log(true);
      } else console.log(false);
    }
}

One thing, which I would like to point out: By checking, if the value is correct in any of the three sudoku, you run the risk of returning a true, even when it is not the correct number, since one of the other sudoku might have the entered number in that cell, while the displayed sudoku doesn't. So, it might be better to know which sudoku was selected and compare only with the selected one, instead of all three.

edited Sep 15, 2022 at 2:59

answered Sep 15, 2022 at 2:34

Geshode

3,7706 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yehoudith Polony Over a year ago

I tried both solutions and I get an Uncaught TypeError: Cannot read properties of undefined (reading 'value')

Geshode Over a year ago

Now I see, what the problem is. You use innerText for the existing numbers and input for the user input. I update the answer.

Collectives™ on Stack Overflow

How to get the values of table input fields in a multi-D array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related