Apply multiple methods to single html element

Apply multiple methods to single html element

function settings(){
  document.getElementById('S').innerText = 'Single Player';
  var set1 = $('#S').one('click', function(){
  var set2 = $('#M').one('click', function(){

function pick(mode){

  if(mode === 'ai'){
    document.getElementById('S').innerText = 'X';
    document.getElementById('M').innerText = 'O';
    var x1 = $('#S').one('click', function(){
    var o2 = $('#M').one('click', function(){

function xOChosen(letter){
  document.getElementById('txt').innerText = '';
  document.getElementById('S').innerText = 'Play';
  document.getElementById('M').innerText = 'Settings';
  var set1 = $('#S').one('click', function(){
    if(letter === 'X'){
    }else if(letter === 'O'){
  var set2 = $('#M').one('click', function(){

function restart(letter){
  if(letter === 'O'){
  }else if(letter ==='X'){
  }else if(letter === undefined){

Works well the first time through, but if you click restart(i.e. settings) it starts logging errors. Multiple errors. I’m thinking it’s a problem with the lexical scope but I don’t know how to fix it.
Full code:


Sorry, I can’t even get it to run properly. First it seems to not do anything then it starts overwriting squares with other Xs and Os. I can’t even get to the restart.


It wouldn’t run correctly for me.


It’s not made to do anything but log the results, supposed to log "o’ bad if you chose O. Or ‘x’ good, if you chose X. just to decide if you start or the computer does, O is always first. First time through is fine. any time in after that it starts compounding.


I have a feeling it’s because i’m chaining functions into one another. Is that bad practice? and if so, what’s the alternative?


You’re not chaining anything in the piece of code in the op, so if it’s something in that code you’re talking about, chaining definitely isn’t the issue.


Haha chaining is a keyword, sorry. I just meant that there is a link between functions that makes them go from one to the other then back to the first one.


I’m not home right now, so I can’t check it, but I’d just put console.log statements in several places and make sure the code is going where I want and make sure the variables are getting assigned.


Yea, i’m trying to fix the console.log repeating after cycling through the functions.


Ah, right I see. I’m on a phone but I can’t test this, but you’re attaching and reattaching event handlers to the same elements and they’re being dynamically added by functions that attach them inside the callbacks. So yeah, code is a bit overcomplicated.

Have a single event handler per element, and only select those elements once (you don’t need to keep reselecting them). Then do different stuff depending on conditions in the callbacks (if the game is in this state, do x, if it is in some other state, do y). Don’t have an event handler that creates another event handler on the same element etc etc. Also why one? Was this to try to stop issues you were having with this approach initially? Because you shouldn’t really need one in this task; it has a few specific uses but should be unecessary here.


Yea, you nailed it. I was just testing a few different things like unbind, one, off, stopProp, etc. before I posted on the forum. Trying to avoid rewriting the whole thing. So, having an event handler creating another event handler on the same element is bad practice. I’ll just rewrite it. Thank you!