我目前正在开发一款 Tic Tac Toe 游戏，并且拥有使 x 和 o 出现的代码。但是，单击方块时并不总是调用 onclick 事件，并且在多次单击后随机决定工作。我究竟做错了什么？ javascript 位于顶部，SVG 元素位于底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script lang="javascript">
let whosTurn = "o";
function clickedSquare(x1,x2, o) {
console.log('hi!')
var eleX = document.getElementById(x1);
var eleXR = document.getElementById(x2)
var eleO = document.getElementById(o);
var eleXstyle = eleX.getAttribute("stroke");
var eleXRstyle = eleXR.getAttribute("stroke");
var eleOstyle = eleO.getAttribute("stroke");
if (eleXstyle == "transparent" && eleOstyle == "transparent") {
if (whosTurn = "x") {
eleXstyle == "black"
eleXRstyle =="black"
eleX.setAttribute( "stroke", "black");
eleXR.setAttribute( "stroke", "black");
whosTurn = "o"
} else {
eleOstyle == "black"
eleO.setAttribute( "stroke", "black");
whosTurn = "x"
}
}
console.log(whosTurn)
}
function checkForWinner() {
}
</script>
</head>
<body>
<svg width="500" height="500" style="background-color: black;" viewBox="0 0 500 500">
<rect width="160" height="160" x="0" y="0" fill="red" onclick="clickedSquare('x1l','x1r','circle1');"></rect>
<rect width="160" height="160" x="170" y="0" fill="white" onclick="clickedSquare('x2l','x2r','circle2'); checkForWinner();"></rect>
<rect width="160" height="160" x="340" y="0" fill="white" onclick="clickedSquare('x3l','x3r','circle3'); checkForWinner();"></rect>
<rect width="160" height="160" x="0" y="170" fill="white" onclick="clickedSquare('x4l','x4r','circle4'); checkForWinner();"></rect>
<rect width="160" height="160" x="170" y="170" fill="white" onclick="clickedSquare('x5l','x5r','circle5'); checkForWinner();"></rect>
<rect width="160" height="160" x="340" y="170" fill="white" onclick="clickedSquare('x6l','x6r','circle6'); checkForWinner();"></rect>
<rect width="160" height="160" x="0" y="340" fill="white" onclick="clickedSquare('x7l','x7r','circle7'); checkForWinner();"></rect>
<rect width="160" height="160" x="170" y="340" fill="white" onclick="clickedSquare('x8l','x8r','circle8'); checkForWinner();"></rect>
<rect width="160" height="160" x="340" y="340" fill="white" onclick="clickedSquare('x9l','x9r','circle9'); checkForWinner();"></rect>
<line x1="20" y1="20" x2="130" y2="120" stroke="transparent" stroke-width="5px" class="exes x1" id="x1l"></line>
<line x1="130" y1="20" x2="20" y2="120" stroke="transparent" stroke-width="5px" class="exes x1" id="x1r"></line>
<line x1="190" y1="20" x2="300" y2="120" stroke="transparent" stroke-width="5px" class="exes x2" id="x2l"></line>
<line x1="300" y1="20" x2="190" y2="120" stroke="transparent" stroke-width="5px" class="exes x2" id="x2r"></line>
<line x1="360" y1="20" x2="470" y2="120" stroke="transparent" stroke-width="5px" class="exes x3" id="x3l"></line>
<line x1="470" y1="20" x2="360" y2="120" stroke="transparent" stroke-width="5px" class="exes x3" id="x3r"></line>
<line x1="20" y1="190" x2="130" y2="290" stroke="transparent" stroke-width="5px" class="exes x4" id="x4l"></line>
<line x1="130" y1="190" x2="20" y2="290" stroke="transparent" stroke-width="5px" class="exes x4" id="x4r"></line>
<line x1="190" y1="190" x2="300" y2="290" stroke="transparent" stroke-width="5px" class="exes x5" id="x5l"></line>
<line x1="300" y1="190" x2="190" y2="290" stroke="transparent" stroke-width="5px" class="exes x5" id="x5r"></line>
<line x1="360" y1="190" x2="470" y2="290" stroke="transparent" stroke-width="5px" class="exes x6" id="x6l"></line>
<line x1="470" y1="190" x2="360" y2="290" stroke="transparent" stroke-width="5px" class="exes x6" id="x6r"></line>
<line x1="20" y1="360" x2="130" y2="470" stroke="transparent" stroke-width="5px" class="exes x7" id="x7l"></line>
<line x1="130" y1="360" x2="20" y2="470" stroke="transparent" stroke-width="5px" class="exes x7" id="x7r"></line>
<line x1="190" y1="360" x2="300" y2="470" stroke="transparent" stroke-width="5px" class="exes x8" id="x8l"></line>
<line x1="300" y1="360" x2="190" y2="470" stroke="transparent" stroke-width="5px" class="exes x8" id="x8r"></line>
<line x1="360" y1="360" x2="470" y2="470" stroke="transparent" stroke-width="5px" class="exes x9" id="x9l"></line>
<line x1="470" y1="360" x2="360" y2="470" stroke="transparent" stroke-width="5px" class="exes x9" id="x9r"></line>
<circle cx="70" cy="70" r="60" stroke="transparent" stroke-width="5px" fill="transparent" class="circle" id="circle1"></circle>
<circle cx="250" cy="70" r="60" stroke="transparent" stroke-width="5px" fill="transparent" class="circle" id="circle2"></circle>
<circle cx="430" cy="70" r="60" stroke="transparent" stroke-width="5px" fill="transparent" class="circle" id="circle3"></circle>
<circle cx="70" cy="250" r="60" stroke="transparent" stroke-width="5px" fill="transparent" class="circle" id="circle4"></circle>
<circle cx="250" cy="250" r="60" stroke="transparent" stroke-width="5px" fill="transparent" class="circle" id="circle5"></circle>
<circle cx="430" cy="250" r="60" stroke="transparent" stroke-width="5px" fill="transparent" class="circle" id="circle6"></circle>
<circle cx="70" cy="430" r="60" stroke="transparent" stroke-width="5px" fill="transparent" class="circle" id="circle7"></circle>
<circle cx="250" cy="430" r="60" stroke="transparent" stroke-width="5px" fill="transparent" class="circle" id="circle8"></circle>
<circle cx="430" cy="430" r="60" stroke="transparent" stroke-width="5px" fill="transparent" class="circle" id="circle9"></circle>
</svg>
<script>
</script>
</body>
</html>您有一组“矩形”元素和一组“圆形”元素。 onclick 侦听器正在侦听矩形上的点击。 圆形元素劫持了点击，因此如果您沿着矩形的侧面点击，它就会起作用。
如果将圆形元素放置在相应的矩形元素内，它将起作用
<rect
width="160"
height="160"
x="340"
y="340"
fill="white"
onclick="clickedSquare('x9l','x9r','circle9');"
>
<circle
cx="430"
cy="430"
r="60"
stroke="transparent"
stroke-width="5px"
fill="transparent"
class="circle"
id="circle9"
></circle>
</rect>```