Javascript error: function is not defined at HTMLTableCellElement.onclick

Question

So I'm trying to make a tic-tac-toe game on HTML/JS, however my onclicks just kind of stopped working, the error I get now is that all the functions are not defined. I tried changing my clear() function to jQuery but I am unable to test it.

Here is a jsfiddle.

Essentially, It's getting this html

 <td class="tile" id="pos1" onclick="draw(this); checkWinner();"></td>

To recognize this javascript function

var counter = 0;
function draw(elmt){
    if(elmt.innerHTML == "x" || elmt.innerHTML == "o")
    {
        //do nothing
    }
    else{
    if(counter==0){
        elmt.innerHTML = "x";
        counter = 1;
    }
    else{
        elmt.innerHTML = "o";
        counter = 0;
    }
    }
}

Thank you!

[Why does this simple JSFiddle not work?](https://stackoverflow.com/questions/7043649/why-does-this-simple-jsfiddle-not-work) – JSFiddle defaults to running the JavaScript you provide after an event. This is often useful, but changes the scope of the functions so `on*` attributes can't reach them. You'll need to either change the setting or how you're binding the events. — Jonathan Lonowski, Nov 08 '17 at 03:17

JiangangXiong · Answer 1 · 2017-11-08T03:32:20.883

Your checkWinner function is not defined， and make sure all your functions is defined to the global scope, for example, you must can access to the window.draw().

At last, you can also use jQuery to bind event handler conveniently, like:

```

$('.tile').on('click', draw);

function draw(e) {
  var html = $(this).html();
  if(html == "x" || html == "o")
  {
    //do nothing
  } else{
    if(counter==0){
      $(this).html("x");
      counter = 1;
    }
    else{
      $(this).html("o");
      counter = 0;
    }
  }
}

```

var counter = 0;
function draw(elmt){
    if(elmt.innerHTML == "x" || elmt.innerHTML == "o")
    {
        //do nothing
    } else{
      if(counter==0){
          elmt.innerHTML = "x";
          counter = 1;
      }
      else{
          elmt.innerHTML = "o";
          counter = 0;
      }
    }
}
function checkWinner(){

}

<table>
<tr>
<td class="tile" id="pos1" onclick="draw(this); checkWinner();">
Click Here
</td>
</tr>
</table>

score 0 · Answer 2 · answered Nov 08 '17 at 03:32

0

i guess their must be something wrong with jsfiddle you can try this your code is working for me

[just remove `$( document ).ready(function() {})`]

answered Nov 08 '17 at 03:32

Hemant Rajpoot

683
1
11
29

Javascript error: function is not defined at HTMLTableCellElement.onclick

2 Answers2