腳本在錨定的 HTML 頁面中不起作用
[英]Scripts not working in anchored HTML page
問題描述
我在我正在使用的網站上有一個主頁，為了好玩，我想我會添加一個井字游戲，當它在導航欄上單擊時，它會作為一個錨點打開。
我的問題是，即使 tic tac toe 單獨運行時運行良好，一旦我將它添加為錨點，腳本就不會運行，但我不確定為什么
這是我主頁的 HTML：
<!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>
這是錨點中鏈接的 tictactoe.html：
<!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>
我在網上四處張望，但找不到與此類似的任何內容。
1 個解決方案
解決方案1
0 2022-12-24 08:26:31
在href="views/tictactoe.html"中，將views/tictactoe.html替換為絕對路徑。 這樣可以提高准確性。
使頁面腳本無法訪問由擴展內容腳本生成的HTML
[英]make HTML generated by content scripts of extensions inaccessible to page scripts
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.