JavaScript OnClick not working on iOS

Question

I have developed code which detects when a user clicks on a cell in a table, and then uses the bgColor that has been set for that cell.

All works fine on the desktop computer, but when I try to use my iPad, it does nothing. I have tried to use touchstart but this had made no difference.

I tried changing this:-

 t[i].onclick = getVal;  

to this:-

t[i].addEventListener('touchstart', function(){getVal});

But this has not worked....I will also need to support both desktop and touch devices....so not sure how I go about ensuring I support both in this situation.

My current code looks like this:-

<script type="text/javascript">

function getVal(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    var colorSelected = targ.attributes.bgcolor.value;
    alert(colorSelected);
}
onload = function() 
{
    var ids = ['colorchart1', 'colorchart2', 'colorchart3', 'colorchart4', 'colorchart5'];
    for(var j = 0; j < ids.length; j++) 
    {
        var t = document.getElementById(ids[j]).getElementsByTagName("td");
        for ( var i = 0; i < t.length; i++ )
            t[i].onclick = getVal; 
    }
}

</script>



<table id="colorchart1">
<tr>
<td bgColor="#F8E0E0"></td><td bgColor="#F8ECE0"></td><td bgColor="#F7F8E0"></td><td   bgColor="#ECF8E0"></td>
<td bgColor="#E0F8E0"></td><td bgColor="#E0F8EC"></td><td bgColor="#E0F8F7"></td><td bgColor="#E0ECF8"></td><td bgColor="#E0E0F8"></td>
</tr><tr>
<td bgColor="#F5A9A9"></td><td bgColor="#F5D0A9"></td><td bgColor="#F2F5A9"></td><td bgColor="#D0F5A9"></td>
<td bgColor="#A9F5A9"></td><td bgColor="#A9F5D0"></td><td bgColor="#A9F5F2"></td><td bgColor="#A9D0F5"></td><td bgColor="#A9A9F5"></td>
</tr>
<table>

Answer 1

what about this handle function?

function handler(e){
 e.target.nodeName!='TD'||alert(e.target.bgColor+' on '+
 e.target.parentNode.parentNode.parentNode.id);
}
window.addEventListener('click',handler,false);

or 

window.addEventListener('touchstart',handler,false);

demo

http://jsfiddle.net/gfmbkmmn/

with multiple tables

http://jsfiddle.net/gfmbkmmn/1/

the above function is an alternative solution to handle multiple tables with one event handler. to find your error more info is needed:

note: in ios is better that you write window.onload, and what about the script tags in your "current code", what does the getVal function?

if you have any questions about the code just ask

EDIT

function getVal(e){
 e=e||window.event;//not needed
 e.target=e.target||e.srcElement;//not needed
 if(e.target.nodeName=='TD'){// check if it's a td
  alert(e.target.bgColor);// why write  'targ.attributes.bgcolor.value' ?
 }
}

the node bug is from 7 years ago "Changed 7 years ago by ..." http://bugs.jquery.com/ticket/1148

js is case sensitive : bgcolor != bgColor

http://jsfiddle.net/gfmbkmmn/2/ this basic example allows you to create a fast color palette.