I want to check if $('#td1').text() === “x”?

Question

I want to check if innerHtml have X or O , so i can not add again any thing else , but it\'s not working . it stop after adding the check code , I\'m trying here to do a simple

Answer 1

You don't have to check both if the text is equal to x or not equal to o, one makes the other superflous.

When you set the text of an element using jQUery you supply the value in the call to text, you don't assign it to the return value of the function.

I assume that you want to use the c parameter when you check the value also.

function tdElm(c) {
  if ($('#td' + c).text() == "o") {
    $('#td' + c).text("x");
  }
}

Answer 2

There is quite a few things wrong with your code,

I suggest you take a look at this quick hack I put together which is working, feel free to ask questions.

http://jsfiddle.net/blowsie/TKq2H/4/

function call() {
    var x = Math.floor((Math.random() * 9) + 1);
    if ($('#td' + x).text() === "x" || $('#td' + x).text() == "o") {
        call();
    }
    else {
        $("#td" + x).text("o");
    }

}
$('td').click(function() {
    var no = $(this).data('no')
    if ($('#td' + no).text() === "x" || $('#td' + no).text() == "o") return false;
    else {
        $("#td" + no).text("x");
        call();
    }
});​


<center>
<h1 >"        X ,O Game    "</h1>
<table >
    <tr>
       <td id="td1"  data-no="1" ></td>
       <td id="td2" data-no="2"></td>
       <td id="td3" data-no="3"></td>
    </tr>

    <tr>
       <td id="td4" data-no="4"></td>
       <td id="td5" data-no="5"></td>
       <td id="td6" data-no="6"></td>
    </tr>

    <tr>
       <td id="td7" data-no="7"></td>
       <td id="td8" data-no="8"></td>
       <td id="td9" data-no="9"></td>
    </tr>
</table>
</center>
​

Answer 3

Is valid

var c = 1;
$('#td'+c).text()

If you want set the text of the element must use

$('#td'+c).text("x")

text method with a String param http://api.jquery.com/text/

Answer 4

These 2 things, as far as javascript syntax goes, are not really any different:

document.getElementById("td" + c);
$('#td'+c)

In both cases, you take a string, append a new value to that string, and then pass the result as an argument to a function. So anywhere that would accept a string like '#td1' would allow accept the form of '#td' + c. This isn't about jQuery, just plain javascript.

---

As for this:

$('#td'+c).text() === "x" ; 

This should work, but I believe your issue is whitespace. The text may have some whitespace around it that would make it unequal to "x". jQuery provides a $.trim() function to trim off whitespace for these cases.

if ($.trim($('#td'+c).text()) === "x") {

Or perhaps use a regular expression?

if (/x/.test($('#td'+c).text())) {

Answer 5

Your code is very hard to read. I've whipped a quick almost working script for you to read and understand http://jsfiddle.net/mendesjuan/MQ9Nr/

However, it seems that for what you need, you just have to check if the text is empty or not. Here are a few suggestions

• Don't set handlers from HTML
• Don't need to pass a number into the handler, the handler knows what td was clicked

JS

$(function(){
  var turn = 0;
  var xos = ["x", "o"];
  $("td").click(function(){
    var $this = $(this);
      if ($this.text()) {
        return;
      } else {
        $this.text(xos[turn]);
        turn = (turn + 1) % 2;
      }
  });
});

HTML

<h1 >X ,O Game</h1>
<table >
    <tr>
       <td id="td1"></td>
       <td id="td2"></td>
       <td id="td3"></td>
    </tr>    
    <tr>
       <td id="td4"></td>
       <td id="td5"></td>
       <td id="td6"></td>
    </tr>
    <tr>
       <td id="td7"></td>
       <td id="td8"></td>
       <td id="td9"></td>
    </tr>
</table>