JavaScript似乎存储了我不知道的答案'；我不想储存_Javascript_Html

JavaScript似乎存储了我不知道的答案'；我不想储存

javascript html

JavaScript似乎存储了我不知道的答案'；我不想储存,javascript,html,Javascript,Html,所以我遇到了一个非常有趣的问题，有点困惑。我对全栈web开发的世界还很陌生，所以我不确定从这里到底要去哪里。基本上，我正在创建一个基于web的数独游戏，主要使用HTML、CSS和JavaScript。现在的情况是，我创建了一些函数来填充HTML板并解决该板的问题。它应该在点击按钮时解算并填充电路板，但它似乎是在点击之前从解算的电路板开始填充电路板。在我添加任何代码之前，我只想提前对您的帮助表示感谢，我个人想知道这是否可能是一种缓存问题以下是HTML文件： <!DOCTYPE html&g

所以我遇到了一个非常有趣的问题，有点困惑。我对全栈web开发的世界还很陌生，所以我不确定从这里到底要去哪里。基本上，我正在创建一个基于web的数独游戏，主要使用HTML、CSS和JavaScript。现在的情况是，我创建了一些函数来填充HTML板并解决该板的问题。它应该在点击按钮时解算并填充电路板，但它似乎是在点击之前从解算的电路板开始填充电路板。在我添加任何代码之前，我只想提前对您的帮助表示感谢，我个人想知道这是否可能是一种缓存问题

以下是HTML文件：

<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Sudoku</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
     integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="{% static 'Portfolio/CSS/Sudoku.css' %}">
  </head>
  <body>
    <!-- Header -->
    <header class="header">
      <h1 class="header__title">Sudoku</h1>
      <div class="header__options">
        <button class="header__newGame" type="submit" name="button">
          New Game
        </button>
        <button class="header__darkMode" type="button" name="mode">
          Dark Mode
        </button>

      </div>
    </header>

    <!-- Sudoku Game Section -->
    <section class="sudoku">
      <table class='sudoku__board'>
        <tr class="sudoku__row">
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
        </tr>
        <tr class="sudoku__row">
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
        </tr>
        <tr class="sudoku__row">
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
        </tr>
        <tr class="sudoku__row">
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
        </tr>
        <tr class="sudoku__row">
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
        </tr>
        <tr class="sudoku__row">
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
        </tr>
        <tr class="sudoku__row">
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
        </tr>
        <tr class="sudoku__row">
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
        </tr>
        <tr class="sudoku__row">
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
          <th class="sudoku__space"><input type="text" maxlength="1"></th>
        </tr>
      </table>
    </section>

    <div class="sudoku__buttons">
      <button type="button" class="sudoku__submit">Submit Attempt</button>
      <button type="button" class="sudoku__solve">Solve Puzzle</button>
    </div>

    <!-- Footer -->
    <footer class="footer">
      <a href="mailto:isaacstong90@gmail.com" class="footer__link">IsaacStong90@gmail.com</a>
      <ul class="social-list">
        <!-- LinkedIn -->
        <li class="social-list__item">
          <a href="https://www.linkedin.com/in/isaacstong/" class="social-list__link">
            <i class="fab fa-linkedin"></i>
          </a>
        </li>
        <!-- GitHub -->
        <li class="social-list__item">
          <a href="https://github.com/IsaacStong" class="social-list__link">
            <i class="fab fa-github"></i>
          </a>
        </li>
        <!-- Instagram -->
        <li class="social-list__item">
          <a href="#" class="social-list__link">
            <i class="fab fa-instagram"></i>
          </a>
        </li>
      </ul>
    </footer>

    <script src="{% static 'Portfolio/JS/Sudoku.js' %}"></script>
  </body>
</html>


{%load static%}
数独
数独
新游戏
暗模式
提交尝试
解谜

以下是JS：

// game boards for Sudoku.
const board1 = [
  [5, 3, '', '', 7, '', '', '', ''],
  [6, '', '', 1, 9, 5, '', '', ''],
  ['', 9, 8, '', '', '', '', 6, ''],
  [8, '', '', '', 6, '', '', '', 3],
  [4, '', '', 8, '', 3, '', '', 1],
  [7, '', '', '', 2, '', '', '', 6],
  ['', 6, '', '', '', '', 2, 8, ''],
  ['', '', '', 4, 1, 9, '', '', 5],
  ['', '', '', '', 8, '', '', 7, 9]
];

//Code for populating original board and buttons below board
populateBoard(board1);
solvedBoard = solve(board1);
document.querySelector('.sudoku__solve').addEventListener('click', populateBoard(solvedBoard));

//Checks board to see if user is correct
function checkBoard(board) {
  var k = 0;
  blocks = document.querySelectorAll('input');
  for(var i = 0; i < 9; ++i) {
    for(var j = 0; j < 9; ++j) {
    //Checks to see if each space matches the solved board
      if (board[i][j] == blocks[k].value) {
        blocks[k].style.color = 'green'
        }
      else {
        blocks[k].style.color = 'red'
      }
      }
      k = k+1;
    }
}

//populates the HTML board with the given board
function populateBoard(board) {
  // Select all squares from HTML and populate using board.
  blocks = document.querySelectorAll('input');
  var k = 0;
  for(var i = 0; i < 9; ++i) {
    for(var j = 0; j < 9; ++j) {
      blocks[k].value = board[j][i];
      //if statement makes given Sudoku values gray and uneditable.
      if (blocks[k].value != '') {
        blocks[k].readOnly = true;
        blocks[k].style.color = 'gray';
      }
      k = k+1;
    }
  }
}

//Solve Board that has been selected
function solve(board) {
    let emptySpot = nextEmptySpot(board);
    let row = emptySpot[0];
    let col = emptySpot[1];

    // there is no more empty spots
    if (row === -1){
        return board;
    }

    for(let num = 1; num<=9; num++){
        if (checkValue(board, row, col, num)){
            board[row][col] = num;
            solve(board);
        }
    }

    if (nextEmptySpot(board)[0] !== -1)
        board[row][col] = '';

    return board;
}

//Finds empty space for the solve function
function nextEmptySpot(board) {
    for (var i = 0; i < 9; i++) {
        for (var j = 0; j < 9; j++) {
            if (board[i][j] === '')
                return [i, j];
        }
    }
    return [-1, -1];
}

//Check to see if the row selection is valid
function checkRow(board, row, value){
    for(var i = 0; i < board[row].length; i++) {
        if(board[row][i] === value) {
            return false;
        }
    }

    return true;
}

//Check to see if the column selection is valid
function checkColumn(board, column, value){
    for(var i = 0; i < board.length; i++) {
        if(board[i][column] === value) {
            return false;
        }
    }

    return true;
};

function checkSquare(board, row, column, value){
    boxRow = Math.floor(row / 3) * 3;
    boxCol = Math.floor(column / 3) * 3;

    for (var r = 0; r < 3; r++){
        for (var c = 0; c < 3; c++){
            if (board[boxRow + r][boxCol + c] === value)
                return false;
        }
    }

    return true;
};


function checkValue(board, row, column, value) {
    if(checkRow(board, row, value) &&
      checkColumn(board, column, value) &&
      checkSquare(board, row, column, value)) {
        return true;
    }

    return false;
};

//数独游戏板。
常数板1=[
[5, 3, '', '', 7, '', '', '', ''],
[6, '', '', 1, 9, 5, '', '', ''],
['', 9, 8, '', '', '', '', 6, ''],
[8, '', '', '', 6, '', '', '', 3],
[4, '', '', 8, '', 3, '', '', 1],
[7, '', '', '', 2, '', '', '', 6],
['', 6, '', '', '', '', 2, 8, ''],
['', '', '', 4, 1, 9, '', '', 5],
['', '', '', '', 8, '', '', 7, 9]
];
//填充原始板和板下按钮的代码
大众董事会（董事会1）；
solvedBoard=求解（board1）；
document.querySelector（'.sudoku__solve'）。addEventListener（'click'，populateBoard（solvedBoard））；
//检查电路板，看用户是否正确
功能检查板{
var k=0；
blocks=document.querySelectorAll（'input'）；
对于（变量i=0；i<9；++i）{
对于（var j=0；j<9；++j）{
//检查每个空格是否与已解决的电路板匹配
if（板[i][j]==块[k]。值）{
块[k]。style.color='green'
}
否则{
块[k]。style.color='red'
}
}
k=k+1；
}
}
//用给定的板填充HTML板
功能板（板）{
//从HTML中选择所有方块并使用board填充。
blocks=document.querySelectorAll（'input'）；
var k=0；
对于（变量i=0；i<9；++i）{
对于（var j=0；j<9；++j）{
块[k]。值=板[j][i]；
//if语句使给定的数独值变为灰色且不可编辑。
if（块[k]。值！=''）{
块[k]。只读=true；
块[k].style.color='gray'；
}
k=k+1；
}
}
}
//求解已选择的板
函数求解（板）{
设emptySpot=nextySpot（板）；
设行=空点[0]；
设col=emptySpot[1]；
//再也没有空位了
如果（行==-1）{
返回板；
}
对于（让num=1；num问题在这里：
document.querySelector('.sudoku__solve').addEventListener('click', populateBoard(solvedBoard));

当您像这样添加函数populateBoard（solvedBoard）
时，您会立即调用它。因此，您需要做的是：
 document.querySelector('.sudoku__solve').addEventListener('click', () => populateBoard(solvedBoard));

谢谢！我完全陷入了一个兔子洞，我认为这与按值传递与按引用传递有关