How Can I Change The Value Of The Button When Clicked?
In class I am making a tic tac toe game and have been stuck for 2 days trying to make the x's and o's appear and the assignment is due tomorrow! Here is the assignment sheet: COMPS
Solution 1:
if (document.getElementById("button1").onclick) is not how you test if they clicked on button1. That just tests whether the onclick property contains anything, which it does because it contains the value of the onclick="ChooseSquare()" attribute.
You can fix this by making the function take a parameter. You can pass this as an argument to the function, then it can use that to update the button the user clicked on.
In CheckWin() you need to get the values of the buttons. Also, the IDs need to be on the <button> elements, not the <td>s.
In reset() you were using variables one, two, etc. but these were local to CheckWin. I changed it to just loop over all the elements with class="button".
var winner;
var current;
function Start() {
current = "x";
}
function ChooseSquare(button) {
button.value = current;
current = (current == "x") ? "o" : "x";
button.disabled = true; // Prevent clicking button twice
CheckWin();
}
function CheckWin() {
var one = document.getElementById("button1").value;
var two = document.getElementById("button2").value;
var three = document.getElementById("button3").value;
var four = document.getElementById("button4").value;
var five = document.getElementById("button5").value;
var six = document.getElementById("button6").value;
var seven = document.getElementById("button7").value;
var eight = document.getElementById("button8").value;
var nine = document.getElementById("button9").value;
//x wins
if (one == "x" && two == "x" && three == "x") {
window.alert("player1 has won")
}
if (one == "x" && four == "x" && seven == "x") {
window.alert("player1 has won")
}
if (one == "x" && five == "x" && nine == "x") {
window.alert("player1 has won")
}
if (two == "x" && five == "x" && eight == "x") {
window.alert("player1 has won")
}
if (three == "x" && six == "x" && nine == "x") {
window.alert("player1 has won")
}
if (three == "x" && five == "x" && seven == "x") {
window.alert("player1 has won")
}
if (four == "x" && five == "x" && six == "x") {
window.alert("player1 has won")
}
if (seven == "x" && nine == "x" && eight == "x") {
window.alert("player1 has won")
}
//o wins
if (one == "o" && two == "o" && three == "o") {
window.alert("player2 has won")
}
if (one == "o" && four == "o" && seven == "o") {
window.alert("player2 has won")
}
if (one == "o" && five == "o" && nine == "o") {
window.alert("player2 has won")
}
if (two == "o" && five == "o" && eight == "o") {
window.alert("player2 has won")
}
if (three == "o" && six == "o" && nine == "o") {
window.alert("player2 has won")
}
if (three == "o" && five == "o" && seven == "o") {
window.alert("player2 has won")
}
if (four == "o" && five == "o" && six == "o") {
window.alert("player2 has won")
}
if (seven == "o" && nine == "o" && eight == "o") {
window.alert("player2 has won")
}
}
function reset() {
Array.from(document.querySelectorAll(".button")).forEach(b => {
b.value = " ";
b.disabled = false;
});
}#Header {
background-color: Red;
color: white;
text-align: center;
font-family: Acme, Arial, sans-serif;
padding: 5px;
}
#Main {
margin-left: 200px;
margin-right: 100px;
padding: 0px;
background-color: white;
}
td {
width: 30px;
height: 70px;
}
#Footer {
background-color: grey;
text-align: center;
color: white;
font-family: "Playfair Display", "Times New Roman", serif;
padding: 0px;
font-size: 20px;
}
.button {
height: 100px;
width: 100px;
background-color: purple;
font-family: Acme, Arial, sans-serif;
border-color: black;
border-width: 5px;
color: white;
font-size: 20px;
}<html>
<head>
<title> Tic Tac Toe </title>
<link href="https://fonts.googleapis.com/css?family=Acme|Playfair+Display&display=swap" rel="stylesheet">
</head>
<body onload="Start()">
<div id="Header">
<h1> Tic Tac Toe </h1>
</div>
<div id="Main">
<table>
<tr>
<td> <input id="button1" class="button" type="button" onclick="ChooseSquare(this)"></td>
<td> <input id="button2" class="button" type="button" onclick="ChooseSquare(this)"></td>
<td> <input id="button3" class="button" type="button" onclick="ChooseSquare(this)"></td>
</tr>
<tr>
<td> <input id="button4" class="button" type="button" onclick="ChooseSquare(this)"></td>
<td> <input id="button5" class="button" type="button" onclick="ChooseSquare(this)"></td>
<td> <input id="button6" class="button" type="button" onclick="ChooseSquare(this)"></td>
</tr>
<tr>
<td> <input id="button7" class="button" type="button" onClick="ChooseSquare(this)"></td>
<td> <input id="button8" class="button" type="button" onClick="ChooseSquare(this)"></td>
<td> <input id="button9" class="button" type="button" onClick="ChooseSquare(this)"></td>
</tr>
</table>
<input type="button" onClick='reset()' value="reset">
</div>
<div id="Footer">
<p id="foot"> Read to Play? Click on a square!</p>
</div>
</body>
</html>Solution 2:
I can't resist...
const main = document.querySelector('#Main')
, All_bt = document.querySelectorAll('#Main > button')
, btReset = document.querySelector('#bt-reset')
;
var current = 0
, players = [ { cod: 'x', case: [ ] }
, { cod: 'o', case: [ ] }
]
;
main.onclick=e=>
{
if (e.target.tagName.toLowerCase() !== 'button') return;
e.target.textContent = players[current].cod;
e.target.disabled = true
players[current].case.push( e.target.id.slice(-3))
// check win...
let Win = false
, Kaz = []
for(i=1;i<4;i++)
{
Kaz = players[current].case.filter(K=>Number(K.charAt(0))===i)
if (Kaz.length===3) { Win=true; break }
Kaz = players[current].case.filter(K=>Number(K.charAt(2))===i)
if (Kaz.length===3) { Win=true; break }
}
if (!Win)
{
Kaz = players[current].case.filter(K=>K==='1-1' || K==='2-2' || K==='3-3')
Win = (Kaz.length===3)
}
if (!Win)
{
Kaz = players[current].case.filter(K=>K==='1-3' || K==='2-2' || K==='3-1')
Win = (Kaz.length===3)
}
// console.log(Win)
if (Win)
{
All_bt.forEach(bt=>
{
bt.disabled=true
if ( Kaz.includes( bt.id.slice(-3) ))
{ bt.className='Win' }
})
}
current = ++current %2
}
btReset.onclick=_=>
{
current = 0
players[0].case.length = 0
players[1].case.length = 0
All_bt.forEach(bt=>{ bt.disabled=false; bt.textContent = '\u00a0'; bt.className='' })
}#Main {
display: block;
--bt-size : 50px;
width:180px;
}
#Main > button {
display: inline-block;
width: var(--bt-size);
height: var(--bt-size);
margin: 2px;
font-size: 30px;
font-weight: bold;
text-align: center;
padding: 0;
}
.Win {
background-color: turquoise;
}
#bt-reset { margin: 1em;}<div id="Main">
<button id="bt-1-1"> </button>
<button id="bt-1-2"> </button>
<button id="bt-1-3"> </button>
<button id="bt-2-1"> </button>
<button id="bt-2-2"> </button>
<button id="bt-2-3"> </button>
<button id="bt-3-1"> </button>
<button id="bt-3-2"> </button>
<button id="bt-3-3"> </button>
</div>
<button id="bt-reset">reset</button>
Post a Comment for "How Can I Change The Value Of The Button When Clicked?"