Question

EDIT:

I’ve made the changes Matthew and Yossi suggested and it still doesn’t seem to work. Those changes I’ve edited in the post below too.

It now works!

---

I have a question for a particular problem I can’t solve. If you know this question has been answered please send me the link as an answer. I’m trying not to use a framework in this case, but can use jQuery if necessary.

I have found answers on how to attach listeners via functions but I need something so as I wouldn’t have to refactor all the code I already have. I’m a freelancer and am working on somebody else’s code.

What happens is that I want to detect a touch event for a touch device. This code should work for a PC too so I need to detect clicks. There’s this DIV which is created programatically to which I need to add the click or touch, depending on the device. Originally the function was called from an onmousedown event like this:

arrDivAnswers[c].onmousedown = onQuestionDown;

And this is the function it calls:

function onQuestionDown(e)
{
    if(!itemSelected)
    {
        if(this.getAttribute('data-isCorrect') == 'true')
            setStyleQCorrect(this, true);
        else
            setStyleQIncorrect(this);

        this.querySelector('.answerText').style.color = '#ffffff';
        this.querySelector('.isCorrect').style.visibility = 'visible';
    }

    itemSelected = true;
}

This was working fine. Now I’ve made this one which would try and select the correct event for a click or touch (I need a function because I have to use this more than once – and the isTouchDevice is working fine. I use that on some other apps so that code is pretty short and has been tested):

function detectEventClickOrTouch(element, functionToCall){
  //detectEventClickOrTouch(arrDivAnswers[c], 'onQuestionDown');

  if(isTouchDevice()){
    element.addEventListener("touchend", functionToCall, false);
  } else{
    element.addEventListener("click", functionToCall, false);
  }
}

The DIV element gets created like this on some loop:

    arrDivAnswers[c] = document.createElement('div');
    console.log( "Answer object #" + c + " = " + arrDivAnswers[c] );
    arrDivAnswers[c].className = 'autosize';
    arrDivAnswers[c].style.textAlign = 'left';
    arrDivAnswers[c].setAttribute('data-isCorrect',false);
    arrDivAnswers[c].setAttribute('data-isSelected',false);
    divAnswerContainer.appendChild(arrDivAnswers[c]);

And then the events get attached to it like this (the older method has been commented out):

for(c;c < arrQuestions[index].arrAnswers.length;c++)
        {
            var curAnswer = arrQuestions[index].arrAnswers[c];
            arrDivAnswers[c].onmouseover = function (e){setStyleQHover(e.currentTarget)};
            arrDivAnswers[c].onmouseout = function (e){setStyleQUp(e.currentTarget)};


            // Detect touch here *************************
            detectEventClickOrTouch(arrDivAnswers[c], onQuestionDown);
            //arrDivAnswers[c].onmousedown = onQuestionDown;
            // Detect touch here *************************

            arrDivAnswers[c].style.visibility = 'visible';
            arrDivAnswers[c].querySelector('.answerText').innerHTML = curAnswer.strAnswer;
            arrDivAnswers[c].setAttribute('data-isCorrect',curAnswer.isCorrect);
            if(curAnswer.isCorrect)
            {
                //arrDivAnswers[c].classList.add("correctAnswer");
                arrDivAnswers[c].className = "correctAnswer";
            }
            else
            {
                //arrDivAnswers[c].classList.remove("correctAnswer");
                arrDivAnswers[c].className = "autosize";
            }
            arrDivAnswers[c].setAttribute('data-isSelected',false);
            setStyleQUp(arrDivAnswers[c]);
            itemSelected = false;
        }
[...]

The debugger is throwing this error:

Uncaught TypeError: Object [object DOMWindow] has no method ‘getAttribute’

I’m sure I’m messing up the "this" because I’m not calling the function properly.

Answer 1

I agree the “this” variable is getting messed up. The problem is that you are attaching an anonymous function as the callback that then calls eval on another method. This seems unnecessary.

Could you just do this:

function detectEventClickOrTouch(element, functionToCall){
  //detectEventClickOrTouch(arrDivAnswers[c], 'onQuestionDown');

  if(isTouchDevice()){
    element.addEventListener("touchend", functionToCall, false);
  } else{
    element.addEventListener("click", functionToCall, false);
  }
}

And then when you attach the event just do:

detectEventClickOrTouch(arrDivAnswers[c], onQuestionDown);