The question is published on by Tutorial Guruji team.
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
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
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.