Home/ Questions/Q 8826131
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T07:03:32+00:00

I am creating an extremely basic javascript version of tic tac toe. I have

  • 0

I am creating an extremely basic javascript version of tic tac toe. I have already set up the board utilizing a table and assigning borders appropriately.

When the player makes a move an X is placed within the box, and when the computer goes an O.

However my issue is trying to decide if the cell has been “used” meaning that there already exists an X or O within.

Is there a function in javascript which can check for contents within an HTML element or can anyone think of another way to do this? I considered using an array of 9, holding x or o and checking this way, but I ran into the issue of figuring out how to pass the cell number to that function to update the array.

I’m new to javascript so if either of these possibilities exist please let me know or if you have any suggestions of your own!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use textContent and innerText to get the text of an element.

    Example:

    <!doctype html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <p id="hello-container">Hello, World!</p>
        <script type="text/javascript">
            var el = document.getElementById('hello-container');
            var text = el.textContent || el.innerText || '';
            alert('The text is: ' + text);
        </script>
    </body>
</html>

    Explanation:

    Since IE8- uses innerText and Firefox uses textContent (with other browsers choosing either one side or both), you need to check both properties. We make use of JavaScript’s logical or operator || to check both properties in one line. text = el.textContent || el.innerText will store el.textContent in text if there is a textContent property. If there is not a textContent property (or if textContent is the empty string or just whitespace), then it will try to store innerText in the text variable. Finally, we use || '' to set it to the empty string if neither textContent nor innerText could be found *.

    * This is only necessary if textContent was the empty string/whitespace and innerText did not exist, in which case both would be falsey. Rather than let text be undefined, we store the empty string '' instead.

    If you would like to check to see if HTML is in an element rather than text (this would be helpful if you are using image elements for your X and O) you can use innerHTML. This is standard for all browsers!

    • 0