CODEWITHSUNDEEP
javascripthtmltic-tac-toe
Jenny
Jenny

Reputation: 1

Simple Tic Tac Toe with javascript

So I am completely new to coding all together and I am hilariously terrible at it! I tried to create a simple tic tac toe board and I need to get a button to display either an X or and O based on what the previous button displayed. How do I get it to refer back to the previous button? Here is what I have so far and it is supposed to be super simple. Is there anyone who can point me in the right direction?

<!DOCTYPE html>
<html>
<head>
<title> Project 8 </title>
</head>
<body>
<p>Click the button once to change its value</p>

<button id="mybtn1" onclick="myFunction1()">&nbsp;</button>
<button id="mybtn2" onclick="myFunction2()">&nbsp;</button>
<button id="mybtn3" onclick="myFunction3()">&nbsp;</button>
<p style="clear:both"></p>
<button id="mybtn4" onclick="myFunction1()">&nbsp;</button>
<button id="mybtn5" onclick="myFunction2()">&nbsp;</button>
<button id="mybtn6" onclick="myFunction3()">&nbsp;</button>
<p style="clear:both"></p>
<button id="mybtn7" onclick="myFunction1()">&nbsp;</button>
<button id="mybtn8" onclick="myFunction2()">&nbsp;</button>
<button id="mybtn9" onclick="myFunction3()">&nbsp;</button>

<p></p>

<script>

    var X= document.getElementById("mybtn1").innerHTML;

function myFunction1() {
    //var X= document.getElementById("mybtn1").innerHTML;
    if (X == "&nbsp;") {
        document.getElementById("mybtn1").innerHTML = "X";
    }
    else (X == "X") {
    document.getElementById("mybtn1").innerHTML = "O";
    }
    else if (X == "O") {
    document.getElementById("mybtn1").innerHTML = "X";
    } 
}

function myFunction2() {
    //var X= document.getElementById("mybtn2").innerHTML;
    if (X == "&nbsp;") {
        X="X"
        document.getElementById("mybtn2").innerHTML = X;
    }
    if (X == "X") {
    document.getElementById("mybtn2").innerHTML = "O";
    } 
    if (X == "O") {
    document.getElementById("mybtn2").innerHTML = "X";
    } 
}

function myFunction3() {
    //var X= document.getElementById("mybtn3").innerHTML;
    if (X == "&nbsp;") {
        document.getElementById("mybtn3").innerHTML = X;
    }
    if (X == "X") {
    document.getElementById("mybtn3").innerHTML = "O";
    } 
    if (X == "O") {
    document.getElementById("mybtn3").innerHTML = "X";
    } 
}
</script>


</body>
</html>

Upvotes: 0

Views: 1917

Answers (1)

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

You can try this:

var btn = document.getElementById("mybtn1");
btn.innerHTML = btn.innerHTML === "X" ? "O" : "X";

Or simply:

<button onclick="switchIt(this)">&nbsp;</button>//An example of button

And:

function switchIt(btn) {
    btn.innerHTML = btn.innerHTML === "X" ? "O" : "X";
}

Demo: https://jsfiddle.net/iRbouh/6qn9Lz9u/1/

Upvotes: 2

Related Questions