I have 5 click-able div tags, the div’s display a yellow square with a number in. When the user clicks a square, the colour of the square changes to indicate that the clicked square is the ”active” square (This part works fine). Then the user should be able to press a number. When the number is pressed, the number displayed in the div should change to the number they have pressed!
BUT… It doesn’t work! as a div attribute, I have onkeypress=”(function to change innerHTML of the tag)”.
For testing purposes I wrote onkeypress=”alert(‘key’);” as a div attribute to see if it was my javascript function, or the onKeyPress itself! but the Alert wont even display!
I tried putting the onKeyPress alert in the body tag, and it worked fine. its just the div! I also tried pressing a key before I clicked on the div and after I clicked on the div!
I also tried onkeydown and onkeyup!
I really cant see the problem! Code follows:
<html>
<head>
<style type="text/css">
#grid {
position:absolute;
padding: 0;
border:0;
width:370px;
height:370px;
}
.box
{
position:absolute;
border: 2px solid Black;
height: 50px;
width: 50px;
vertical-align: middle;
text-align: center;
background-color: yellow;
font-size: xx-large;
color:Navy;
font-family: Arial;
margin:10px;
line-height:1.6;
}
.boxActive
{
background-color:Aqua;
}
</style>
<script type="text/javascript>
function clicked(id) {
reset();
$(id).addClass('boxActive');
}
</script>
<script type="text/javascript" src="JQuery.js"></script>
</head>
<body>
<div id="grid">
<div id="cell_0_0" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%; left:0%; ">0</div>
<div id="cell_0_1" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%; left:20%; ">0</div>
<div id="cell_0_2" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%; left:40%; ">0</div>
<div id="cell_0_3" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%; left:60%; ">0</div>
<div id="cell_0_4" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%; left:80%; ">0</div>
</div>
</body>
</html>
Can anybody suggest how to fix this OR a method to change the innerHTML of the div Tags when a user clicks the div and presses a key!
Thankyou!!!
Alex
I came across a similar problem recently. I think what you need to do is enable your DIV to receive the focus. The answer to this question should help – essentially add a tabindex attribute to the DIV.