[英]Why My function doesn't work properly as a I want?
Here, I want when I will click on X turn
, all gameDiv
boxes will be X
.在这里,我希望当我点击
X turn
,所有gameDiv
框都将是X
。 And when I will click on 0
turns it will be all 0
.当我点击
0
圈时,它将全部为0
。 but in my code When I click on x turn
or 0 turns
, every time it is giving me 0
.但是在我的代码中,当我单击
x turn
或0 turns
x turn
,每次它都给我0
。 I know this problem is happening because, in divcall function
, select0 function
is working every time.我知道这个问题正在发生,因为在
divcall function
, select0 function
每次都在工作。 But I want to know how can I fix this problem?但我想知道如何解决这个问题? I want, whenever I will click on
X or 0
only selectX
or select0
function will work```.我想要,每当我点击
X or 0
只有selectX
或select0
功能会起作用```。 As I am learning javascript recently, So, I couldn't be able to find out the solution for this problem.由于我最近正在学习 javascript,因此,我无法找到此问题的解决方案。 Please help me to fix this problem.
请帮我解决这个问题。 I am just stuck here.
我只是被困在这里。
let num1='X'; let num2='0'; function divCall(divIndex){ let childDiv=document.getElementById("div"+divIndex); selectX(childDiv); select0(childDiv); } //start & restart function let startButton=document.querySelector(".buttonDiv"); let childStart=startButton.children; childStart[0].addEventListener("click",start); childStart[1].addEventListener("click",restart); function start(){ let closeElement=document.querySelector(".startAlert"); closeElement.style.visibility="visible"; closeElement.style.opacity="1"; } function restart(){ let restartDiv=document.querySelector(".container"); let childRestartDiv=restartDiv.children; for(let i=0;i<9;i++){ childRestartDiv[i].innerHTML=" "; } } //popup funtion let parentOfPopupDiv=document.querySelector(".startAlert"); let childOfPopupDiv=parentOfPopupDiv.children; childOfPopupDiv[0].addEventListener("click",close); childOfPopupDiv[2].addEventListener("click",selectX); childOfPopupDiv[3].addEventListener("click",select0); //close function function close(){ let closeElement=document.querySelector(".startAlert"); closeElement.style.visibility="hidden"; closeElement.style.opacity="0"; } //select x funtion function selectX(childDiv){ close(); childDiv.innerHTML=num1; } // select 0 function function select0(childDiv){ close(); childDiv.innerHTML=num2; }
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ text-align: center; } h1{ margin-top: 50px; } .container{ margin: auto; margin-top: 100px; margin-bottom: 50px; width: 300px; display: flex; flex-wrap: wrap; } .container .gameDiv{ height: 100px; width: 100px; border: 2px solid black; line-height: 100px; font-size: 50px; font-weight: 700; } .container .gameDiv:nth-child(1), .container .gameDiv:nth-child(2), .container .gameDiv:nth-child(3){ border-top: none; } .container .gameDiv:nth-child(1), .container .gameDiv:nth-child(4), .container .gameDiv:nth-child(7){ border-left: none; } .container .gameDiv:nth-child(7), .container .gameDiv:nth-child(8), .container .gameDiv:nth-child(9){ border-bottom: none; } .container .gameDiv:nth-child(3), .container .gameDiv:nth-child(6), .container .gameDiv:nth-child(9){ border-right: none; } .buttonDiv{} .buttonDiv button{ width: 130px; height: 45px; margin-right: 10px; cursor: pointer; } .buttonDiv button:nth-child(2){ margin-right: 0; } .startAlert{ height: 300px; width: 500px; background: black; color:white; padding: 20px; position: fixed; top: 25%; left: 0; right: 0; margin: auto; visibility: hidden; opacity: 0; } .startAlert p{ text-align: right; cursor: pointer; } .startAlert h1{ margin: 50px 0; } .startAlert button{ height: 50px; width: 50px; line-height: 50px; font-weight: 600; background: #e1b9cb; }
<h1>Tic-Tac-Toe</h1> <div class="container"> <div id="div1" class="gameDiv" onclick="divCall(1)"></div> <div id="div2" class="gameDiv" onclick="divCall(2)"></div> <div id="div3" class="gameDiv" onclick="divCall(3)"></div> <div id="div4" class="gameDiv" onclick="divCall(4)"></div> <div id="div5" class="gameDiv" onclick="divCall(5)"></div> <div id="div6" class="gameDiv" onclick="divCall(6)"></div> <div id="div7" class="gameDiv" onclick="divCall(7)"></div> <div id="div8" class="gameDiv" onclick="divCall(8)"></div> <div id="div9" class="gameDiv" onclick="divCall(9)"></div> </div> <div class="buttonDiv"> <button>Start</button> <button>Restart</button> </div> <div class="startAlert"> <p>X</p> <h1>Select Your Turn</h1> <button>X Turn</button> <button>0 Turn</button> </div>
Thanks in Advance
As per your question you need to handle the current player - X
or O
.根据您的问题,您需要处理当前玩家 -
X
或O
。 It means you need to hold the current state.这意味着您需要保持当前状态。
let player_x = "X";
let player_o = "0";
let toggle = false; // <--- Flag to toggle current player.
let current = toggle ? player_x : player_o; // <--- Current player.
function setCurrent(toggle) {
current = toggle ? player_x : player_o;
}
You will call the above method on selection of the turn that is selectX
and select0
.您将在选择轮次时调用上述方法,即
selectX
和select0
。 Notice that for X
the toggle
parameter should be false
.请注意,对于
X
, toggle
参数应为false
。
div
inside tic-tac-toe you add the current state in the innerHTML
and toggle the current state.div
您可以在innerHTML
添加当前状态并切换当前状态。function divCall(id) {
let childDiv = document.getElementById(id);
childDiv.innerHTML = current;
toggle = !toggle;
setCurrent(toggle);
}
This way you will not override the values and will have clear state for the current player.这样您就不会覆盖这些值,并且当前播放器的状态将清晰。
Working example: https://codesandbox.io/s/sample-tic-tac-toe-9vubg工作示例: https : //codesandbox.io/s/sample-tic-tac-toe-9vubg
This is of course a quick and one way of solving this problem.这当然是解决这个问题的一种快捷方式。 You can always work on refactoring the code to work better.
你总是可以重构代码以更好地工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.