Scripts not working in anchored HTML page

Question

I have a homepage on a website I'm working on, for fun I thought I'd add a tic tac toe game that opens up as an anchor when it is clicked on the navbar.

My issue is, even when the tic tac toe works perfectly fine running on it's own, once I add it as an anchor, the script doesn't ever run but I'm not sure why

Heres the HTML for my homepage:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" type="text/css" href="assets/style/home.css">
  <script type="module" src="assets/script/home.js"></script>

</head> 
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="views/tictactoe.html">Tic Tac Toe</a></li>
      </ul>
    </nav>
  </header>
  <div class="container">
    <h2>Welcome to My Website</h2>
  </div>
</body>
</html>

And here's the tictactoe.html linked in the anchor:

<!DOCTYPE html>
<html>
<head>
  <title>Tic-Tac-Toe</title>
  <style>
    ...Styling...
  </style>
</head>
<body>
  <h1>Tic-Tac-Toe</h1>
  <h2>Score</h2>
  <div style="display: flex; justify-content: center;">
    <p style="margin-left: 20px; margin-right: 20px">Player 1: <span id="player1Score">0</span></p>
    <p style="margin-left: 20px; margin-right: 20px">Player 2: <span id="player2Score">0</span></p>
  </div>

  <button>Reset</button>
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
  <script>
    // Create an array to represent the game board
var gameBoard = [
  ["", "", ""],
  ["", "", ""],
  ["", "", ""]`
];

// Get all td elements in the table
var cells = document.getElementsByTagName("td");

document.getElementsByTagName("button")[0].addEventListener("click", resetGame);

function resetGame() {
  gameBoard = [    ["", "", ""],
    ["", "", ""],
    ["", "", ""]
  ];
  currentPlayer = "X";
  gameOver = false;
  for (var i = 0; i < cells.length; i++) {
    cells[i].innerHTML = "";
  }
}

// Add an event listener to each td element
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("click", function() {
    // When a td element is clicked, get its row and column indices
    var row = this.parentElement.rowIndex;
    var col = this.cellIndex;

    // Call the takeTurn function with the row and column indices
    takeTurn(row, col);
  });
}

// Initialize variables to keep track of the current player and the game state
var gameOver = false;

// Create a variable to keep track of the current player's symbol
var currentPlayer = "X";

// Function to handle a player's turn
// Function to handle a player's turn
function takeTurn(row, col) {
  // Check if the game is already over or if the selected cell is already occupied
  if (gameOver || gameBoard[row][col] != "") {
    return;
  }

  // Check if it is the current player's turn
  if (currentPlayer == "X") {
    // Place the current player's symbol on the game board
    gameBoard[row][col] = currentPlayer;

    // Update the td element to display the current player's symbol
    cells[row * gameBoard[0].length + col].innerHTML = currentPlayer;

    // Check if the current player has won
    if (checkWin(currentPlayer)) {
        // If the current player has won, set the game state to over and display a win message
        gameOver = true;

        if (currentPlayer === "X") {
            var scoreElement = document.getElementById("player1Score");
        } else {
            var scoreElement = document.getElementById("player2Score");
        }

        // Increment the player's score
        var currentScore = parseInt(scoreElement.innerHTML);
        scoreElement.innerHTML = currentScore + 1;

        alert(currentPlayer + " wins!");
    } else if (checkTie()) {
      // If there is a tie, set the game state to over and display a tie message
      gameOver = true;
      alert("It's a tie!");
    }

    // Switch the current player after each turn
    if (currentPlayer === "X") {
        currentPlayer = "O";
    } else {
        currentPlayer = "X";
    }
  }
  else if (currentPlayer == "O") {
    // Place the current player's symbol on the game board
    gameBoard[row][col] = currentPlayer;

    // Update the td element to display the current player's symbol
    cells[row * gameBoard[0].length + col].innerHTML = currentPlayer;

    // Check if the current player has won
    if (checkWin(currentPlayer)) {
        // If the current player has won, set the game state to over and display a win message
        gameOver = true;

        if (currentPlayer === "X") {
            var scoreElement = document.getElementById("player1Score");
        } else {
            var scoreElement = document.getElementById("player2Score");
        }

        // Increment the player's score
        var currentScore = parseInt(scoreElement.innerHTML);
        scoreElement.innerHTML = currentScore + 1;

        alert(currentPlayer + " wins!");
    } else if (checkTie()) {
        // If there is a tie, set the game state to over and display a tie message
        gameOver = true;
        alert("It's a tie!");
    }

    // Switch the current player after each turn
    if (currentPlayer === "X") {
        currentPlayer = "O";
    } else {
        currentPlayer = "X";
    }
    }
}

// Function to check if the current game is tied
function checkTie() {
  for (var row = 0; row < gameBoard.length; row++) {
    for (var col = 0; col < gameBoard[row].length; col++) {
      if (gameBoard[row][col] === "") {
        return false;
      }
    }
  }
  return true;
}

// Function to check if the current player has won
function checkWin(player) {
  // Check all rows
  for (var i = 0; i < gameBoard.length; i++) {
    if (gameBoard[i][0] == player && gameBoard[i][1] == player && gameBoard[i][2] == player) {
      return true;
    }
  }

  // Check all columns
  for (var i = 0; i < gameBoard[0].length; i++) {
    if (gameBoard[0][i] == player && gameBoard[1][i] == player && gameBoard[2][i] == player) {
      return true;
    }
  }

  // Check both diagonals
  if (gameBoard[0][0] == player && gameBoard[1][1] == player && gameBoard[2][2] == player) {
    return true;
  }
  if (gameBoard[0][2] == player && gameBoard[1][1] == player && gameBoard[2][0] == player) {
    return true;
  }

  // If none of the checks have returned true, the player has not won
  return false;
}
  </script>
</body>
</html>

I've looked around online but can't find anything that is similar to this.

Answer 1

In href="views/tictactoe.html" , replace views/tictactoe.html with absolute path. That gives more accuracy.

Scripts not working in anchored HTML page

Question

1 answers

solution1
0 2022-12-24 08:26:31

Scripts not working in anchored HTML page

Question

1 answers

solution1 0 2022-12-24 08:26:31

solution1
0 2022-12-24 08:26:31