Ссылаться на текущий объект (onclick для div) при вызове отдельной функции

#javascript #html #function

#javascript #HTML #функция

Вопрос:

Я разрабатываю простую игру в крестики-нолики и столкнулся с небольшой проблемой. Я использовал сетку div в качестве игровых плиток, каждая со своим собственным свойством onclick.

Я хотел бы вызвать несколько функций при нажатии на плитку и определил функцию main() для обработки этого; однако, как вы увидите ниже, одна из моих функций — placeUserTile(el), полагается на ссылку на текущий объект. В этом случае div, который был выбран.

Как я могу ссылаться на el в placeUserTile(el) из функции main()?

index.html

     <!-- Need to call main() func with current object reference 
         passed in to my placeUserTile() function -->
    <div class="col-xs-6 col-md-12 tile" id="r1c1" onclick="main(this)"></div>

master.js

     function placeUserTile(el){
    var tileIsEmpty  = true;
    // If the selected tile has at least one child,
    // do not allow placement of another tile.
    if (el.firstChild) {
     tileIsEmpty = false;
    }
    if(tileIsEmpty === true){
     cloneUserIcon();
    }
    el.appendChild(newUserIcon);
    newUserIcon.style.display = null;
    }

    function main(){
    evaluateTurn();
    placeUserTile(el);
    }

1. Это вопрос об области видимости? взгляните на это: jsbin.com/qupovunexe/edit?html , js, консоль, вывод

2. Пожалуйста, не публикуйте ответ в вопросе. Вы можете написать решение в разделе ответов и поставить галочку для себя. Приветствия

3. Спасибо за предупреждение!

Ответ №1:

Сделайте это

 function placeUserTile(el){
   var tileIsEmpty  = true;
   // If the selected tile has at least one child,
   // do not allow placement of another tile.
   if (el.firstChild) {
      tileIsEmpty = false;
   }
   if(tileIsEmpty === true){
      cloneUserIcon();
   }
   el.appendChild(newUserIcon);
   newUserIcon.style.display = null;
}

function main(targetElement){
   evaluateTurn();
   placeUserTile(targetElement);
}