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;
functionStart() {
current = "x";
}
functionChooseSquare(button) {
button.value = current;
current = (current == "x") ? "o" : "x";
button.disabled = true; // Prevent clicking button twiceCheckWin();
}
functionCheckWin() {
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 winsif (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 winsif (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")
}
}
functionreset() {
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><linkhref="https://fonts.googleapis.com/css?family=Acme|Playfair+Display&display=swap"rel="stylesheet"></head><bodyonload="Start()"><divid="Header"><h1> Tic Tac Toe </h1></div><divid="Main"><table><tr><td><inputid="button1"class="button"type="button"onclick="ChooseSquare(this)"></td><td><inputid="button2"class="button"type="button"onclick="ChooseSquare(this)"></td><td><inputid="button3"class="button"type="button"onclick="ChooseSquare(this)"></td></tr><tr><td><inputid="button4"class="button"type="button"onclick="ChooseSquare(this)"></td><td><inputid="button5"class="button"type="button"onclick="ChooseSquare(this)"></td><td><inputid="button6"class="button"type="button"onclick="ChooseSquare(this)"></td></tr><tr><td><inputid="button7"class="button"type="button"onClick="ChooseSquare(this)"></td><td><inputid="button8"class="button"type="button"onClick="ChooseSquare(this)"></td><td><inputid="button9"class="button"type="button"onClick="ChooseSquare(this)"></td></tr></table><inputtype="button"onClick='reset()'value="reset"></div><divid="Footer"><pid="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...letWin = 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=trueif ( 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 = 0All_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;}<divid="Main"><buttonid="bt-1-1"> </button><buttonid="bt-1-2"> </button><buttonid="bt-1-3"> </button><buttonid="bt-2-1"> </button><buttonid="bt-2-2"> </button><buttonid="bt-2-3"> </button><buttonid="bt-3-1"> </button><buttonid="bt-3-2"> </button><buttonid="bt-3-3"> </button></div><buttonid="bt-reset">reset</button>
Post a Comment for "How Can I Change The Value Of The Button When Clicked?"