JavaScript OnClick not working on iOS Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of JavaScript OnClick not working on iOS without wasting too much if your time.

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

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.

We are here to answer your question about JavaScript OnClick not working on iOS - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji