I have created a code that can detect when a user clicks on a cell in a table and retrieves the background color set for that cell.
Everything works perfectly on my desktop computer, but when I attempt to use my iPad, it does not respond. I attempted to use touchstart instead, but it did not solve the issue.
I made a change from:
t[i].onclick = getVal;
to:
t[i].addEventListener('touchstart', function(){getVal});
However, this alteration did not resolve the problem. I also need to ensure that my code is compatible with both desktop and touch devices. I am unsure how to achieve this in this situation.
Below is my current code:
<script type="text/javascript">
function getVal(e) {
var target;
if (!e) var e = window.event;
if (e.target) target = e.target;
else if (e.srcElement) target = e.srcElement;
if (target.nodeType == 3) // workaround for Safari bug
target = target.parentNode;
var colorSelected = target.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>