javascript keypress detection

Question

So, for an assignment i have to program a roguelike game in c using cgi. And i want to use javascript so i can bind some keystroked to certain links inside an svg tag. I never touched javascript before, and i don't know what i am doing wrong, and although i already searched for some ways to get this working, nothing seems to work.

Any hint of what is wrong here?

Here is the source code of the page generated:

$(document).keydown(function(e){
     if(e.keyCode == 87) {
       e.preventDefault();
       document.getElementById("0").click();
     }
     if(e.keyCode == 81) {
       e.preventDefault();
       document.getElementById("1").click();
     }
     if(e.keyCode == 69) {
       e.preventDefault();
       document.getElementById("2").click();
     }
     if(e.keyCode == 90) {
        e.preventDefault();
       document.getElementById("3").click();
     }
     if(e.keyCode == 65) {
       e.preventDefault();
       document.getElementById("4").click();
     }
     if(e.keyCode == 83) {
       e.preventDefault();
       document.getElementById("5").click();
     }
     if(e.keyCode == 68) {
       e.preventDefault();
       document.getElementById("6").click();
     }
     if(e.keyCode == 13) {
       e.preventDefault();
       document.getElementById("single").click();
     }
     if(e.keyCode == 8) {
       e.preventDefault();
       document.getElementById("double").click();
     }
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
  <svg width=1300 height=900>
<image x=0 y=0 width=670 height=900 xlink:href=http://localhost/images/backgame.png />
<image x=95 y=18 width=40 height=40 xlink:href=http://localhost/images/1.png />
<polygon points="295,125 313,157 350,157 370,125 350,93 313,93" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="240,157 258,189 295,189 315,157 295,125 258,125" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="352,157 370,189 407,189 427,157 407,125 370,125" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="185,189 203,221 240,221 260,189 240,157 203,157" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="297,189 315,221 352,221 372,189 352,157 315,157" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="409,189 427,221 464,221 484,189 464,157 427,157" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="130,221 148,253 185,253 205,221 185,189 148,189" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="242,221 260,253 297,253 317,221 297,189 260,189" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="354,221 372,253 409,253 429,221 409,189 372,189" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="466,221 484,253 521,253 541,221 521,189 484,189" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,253 93,285 130,285 150,253 130,221 93,221" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,253 205,285 242,285 262,253 242,221 205,221" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,253 317,285 354,285 374,253 354,221 317,221" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,253 429,285 466,285 486,253 466,221 429,221" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,253 541,285 578,285 598,253 578,221 541,221" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,285 38,317 75,317 95,285 75,253 38,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,285 150,317 187,317 207,285 187,253 150,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,285 262,317 299,317 319,285 299,253 262,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,285 374,317 411,317 431,285 411,253 374,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,285 486,317 523,317 543,285 523,253 486,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,285 598,317 635,317 655,285 635,253 598,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,317 93,349 130,349 150,317 130,285 93,285" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,317 205,349 242,349 262,317 242,285 205,285" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,317 317,349 354,349 374,317 354,285 317,285" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,317 429,349 466,349 486,317 466,285 429,285" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,317 541,349 578,349 598,317 578,285 541,285" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,349 38,381 75,381 95,349 75,317 38,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,349 150,381 187,381 207,349 187,317 150,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,349 262,381 299,381 319,349 299,317 262,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,349 374,381 411,381 431,349 411,317 374,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,349 486,381 523,381 543,349 523,317 486,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,349 598,381 635,381 655,349 635,317 598,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,381 93,413 130,413 150,381 130,349 93,349" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,381 205,413 242,413 262,381 242,349 205,349" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,381 317,413 354,413 374,381 354,349 317,349" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,381 429,413 466,413 486,381 466,349 429,349" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,381 541,413 578,413 598,381 578,349 541,349" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,413 38,445 75,445 95,413 75,381 38,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,413 150,445 187,445 207,413 187,381 150,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,413 262,445 299,445 319,413 299,381 262,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,413 374,445 411,445 431,413 411,381 374,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,413 486,445 523,445 543,413 523,381 486,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,413 598,445 635,445 655,413 635,381 598,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,445 93,477 130,477 150,445 130,413 93,413" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,445 205,477 242,477 262,445 242,413 205,413" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,445 317,477 354,477 374,445 354,413 317,413" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,445 429,477 466,477 486,445 466,413 429,413" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,445 541,477 578,477 598,445 578,413 541,413" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,477 38,509 75,509 95,477 75,445 38,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,477 150,509 187,509 207,477 187,445 150,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,477 262,509 299,509 319,477 299,445 262,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,477 374,509 411,509 431,477 411,445 374,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,477 486,509 523,509 543,477 523,445 486,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,477 598,509 635,509 655,477 635,445 598,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,509 93,541 130,541 150,509 130,477 93,477" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,509 205,541 242,541 262,509 242,477 205,477" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,509 317,541 354,541 374,509 354,477 317,477" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,509 429,541 466,541 486,509 466,477 429,477" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,509 541,541 578,541 598,509 578,477 541,477" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,541 38,573 75,573 95,541 75,509 38,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,541 150,573 187,573 207,541 187,509 150,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,541 262,573 299,573 319,541 299,509 262,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,541 374,573 411,573 431,541 411,509 374,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,541 486,573 523,573 543,541 523,509 486,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,541 598,573 635,573 655,541 635,509 598,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,573 93,605 130,605 150,573 130,541 93,541" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,573 205,605 242,605 262,573 242,541 205,541" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,573 317,605 354,605 374,573 354,541 317,541" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,573 429,605 466,605 486,573 466,541 429,541" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,573 541,605 578,605 598,573 578,541 541,541" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,605 38,637 75,637 95,605 75,573 38,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,605 150,637 187,637 207,605 187,573 150,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,605 262,637 299,637 319,605 299,573 262,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,605 374,637 411,637 431,605 411,573 374,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,605 486,637 523,637 543,605 523,573 486,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,605 598,637 635,637 655,605 635,573 598,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,637 93,669 130,669 150,637 130,605 93,605" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,637 205,669 242,669 262,637 242,605 205,605" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,637 317,669 354,669 374,637 354,605 317,605" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,637 429,669 466,669 486,637 466,605 429,605" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,637 541,669 578,669 598,637 578,605 541,605" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="130,669 148,701 185,701 205,669 185,637 148,637" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="242,669 260,701 297,701 317,669 297,637 260,637" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="354,669 372,701 409,701 429,669 409,637 372,637" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="466,669 484,701 521,701 541,669 521,637 484,637" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="185,701 203,733 240,733 260,701 240,669 203,669" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="297,701 315,733 352,733 372,701 352,669 315,669" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="409,701 427,733 464,733 484,701 464,669 427,669" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="240,733 258,765 295,765 315,733 295,701 258,701" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="352,733 370,765 407,765 427,733 407,701 370,701" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="295,765 313,797 350,797 370,765 350,733 313,733" style="fill:#808080;stroke:black;stroke-width:3" />
<image x=32 y=383 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=480 y=511 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=368 y=255 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=311 y=607 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=199 y=415 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=32 y=511 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=423 y=543 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=144 y=511 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=311 y=287 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=32 y=447 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=535 y=479 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=32 y=319 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=199 y=543 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=480 y=255 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=256 y=383 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=311 y=223 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=32 y=575 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=87 y=543 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=87 y=287 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=478 y=191 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image id=enemy0 x=311 y=543 height=56 width=56  xlink:href=http://localhost/images/enemy_m.png />
 <animate
 xlink:href=#enemy0
 attributeName=x
 from=311
 to=311
 dur=0.2s
 begin=0.2s
 fill=freeze />
 <animate
 xlink:href=#enemy0
 attributeName=y
 from=543
 to=543
 dur=0.2s
 begin=0.2s
 fill=freeze />

<image id=enemy0hp0 x=339 y=548 height=5 width=5  xlink:href=http://localhost/images/heart.png />
  <animate
 xlink:href=#enemy0hp0
 attributeName=x
 from=339
 to=339
 dur=0.2s
 begin=0.2s
 fill=freeze />
  <animate
 xlink:href=#enemy0hp0
 attributeName=y
 from=548
 to=548
 dur=0.2s
 begin=0.2s
 fill=freeze />

<image id=enemy1 x=199 y=351 height=56 width=56  xlink:href=http://localhost/images/enemy_m.png />
 <animate
 xlink:href=#enemy1
 attributeName=x
 from=199
 to=199
 dur=0.2s
 begin=0.2s
 fill=freeze />
 <animate
 xlink:href=#enemy1
 attributeName=y
 from=351
 to=351
 dur=0.2s
 begin=0.2s
 fill=freeze />

<image id=enemy1hp0 x=227 y=356 height=5 width=5  xlink:href=http://localhost/images/heart.png />
  <animate
 xlink:href=#enemy1hp0
 attributeName=x
 from=227
 to=227
 dur=0.2s
 begin=0.2s
 fill=freeze />
  <animate
 xlink:href=#enemy1hp0
 attributeName=y
 from=356
 to=356
 dur=0.2s
 begin=0.2s
 fill=freeze />

<image id=enemy2 x=144 y=447 height=56 width=56  xlink:href=http://localhost/images/enemy_a.png />
 <animate
 xlink:href=#enemy2
 attributeName=x
 from=144
 to=144
 dur=0.2s
 begin=0.2s
 fill=freeze />
 <animate
 xlink:href=#enemy2
 attributeName=y
 from=447
 to=447
 dur=0.2s
 begin=0.2s
 fill=freeze />

<image id=enemy2hp0 x=172 y=452 height=5 width=5  xlink:href=http://localhost/images/heart.png />
  <animate
 xlink:href=#enemy2hp0
 attributeName=x
 from=172
 to=172
 dur=0.2s
 begin=0.2s
 fill=freeze />
  <animate
 xlink:href=#enemy2hp0
 attributeName=y
 from=452
 to=452
 dur=0.2s
 begin=0.2s
 fill=freeze />

<a id="0" xlink:href=http://localhost/cgi-bin/jogo?g,1,17>
<polygon points="242,669 260,701 297,701 317,669 297,637 260,637" style="fill:#808080;stroke:black;stroke-width:3;fill-opacity:0" />
</a>
<a id="1" xlink:href=http://localhost/cgi-bin/jogo?g,0,18>
<polygon points="185,701 203,733 240,733 260,701 240,669 203,669" style="fill:#808080;stroke:black;stroke-width:3;fill-opacity:0" />
</a>
<a id="2" xlink:href=http://localhost/cgi-bin/jogo?g,1,18>
<polygon points="297,701 315,733 352,733 372,701 352,669 315,669" style="fill:#808080;stroke:black;stroke-width:3;fill-opacity:0" />
</a>
<a id="5" xlink:href=http://localhost/cgi-bin/jogo?g,0,20>
<polygon points="295,765 313,797 350,797 370,765 350,733 313,733" style="fill:#808080;stroke:black;stroke-width:3;fill-opacity:0" />
</a>
<a id="double" xlink:href=http://localhost/cgi-bin/jogo?d>
<image x=14 y=807 width=340 height=85 xlink:href=http://localhost/images/jump.png />
</a>
<image x=318 y=840 width=30 height=30 xlink:href=http://localhost/images/3.png />
<image id=player x=252 y=703 height=56 width=56  xlink:href=http://localhost/images/player.png />
  <animate
 xlink:href=#player
 attributeName=x
 from=252
 to=252
 dur=0.2s
 fill=freeze />
  <animate
 xlink:href=#player
 attributeName=y
 from=703
 to=703
 dur=0.2s
 fill=freeze /><image x=36 y=764 width=27 height=27 xlink:href=http://localhost/images/heart.png />
<image x=64 y=764 width=27 height=27 xlink:href=http://localhost/images/heart.png />
<image x=92 y=764 width=27 height=27 xlink:href=http://localhost/images/heart.png />
<image x=170 y=15 width=100 height=50 xlink:href=http://localhost/images/exp.png />
<image x=256 y=15 width=45 height=45 xlink:href=http://localhost/images/0.png />
<polygon points="185,189 203,221 240,221 260,189 240,157 203,157" style="fill:#808080;stroke:black;stroke-width:3" />
<image x=195 y=164 width=53 height=53 xlink:href=http://localhost/images/trapdoor.png />
<DIV style="position: absolute; top:0px; left:900px; width:400px; height:600px"><body>
<p>     -------DEBUG--------<br><br><br>ESTADO:<br>NUM_INIMIGOS:     3<br>NUM_OBSTACULOS:     20<br>LVL:     1<br><br>JOGADOR:<br>X:     0<br>Y:     19<br>HP:     3<br>EXP:     0<br>MODE: n<br><br></p>
</body>
</DIV>
</svg>

What should your code do? What doesn't work? Does anything happen? — bamtheboozle, May 12 '17 at 10:20
@DragoşPaulMarinescu is is an html page printed to stdout by a c program that to make a game using cgi, the images won't appear cause they're stored in my pc in cgi's folder — jpinto, May 12 '17 at 10:26
@HassanImam just did, it doesn't make it work, but maybe my code has other errors — jpinto, May 12 '17 at 10:27
I'd recommend calling `e.preventDefault();` once at the top of the keydown callback, rather than in every if block. — evolutionxbox, May 12 '17 at 10:28
@DragoşPaulMarinescu vanilla i guess, detecting these keypresses is the only thing i'll use js for — jpinto, May 12 '17 at 10:36
Possible duplicate of [Simplest way to detect keypresses in javascript](http://stackoverflow.com/questions/16089421/simplest-way-to-detect-keypresses-in-javascript) — polkovnikov.ph, May 12 '17 at 10:37
Take a look at the accepted answer from this question: http://stackoverflow.com/questions/6367339/trigger-a-button-click-from-a-non-button-element — bamtheboozle, May 12 '17 at 10:38

score 0 · Answer 1 · answered May 12 '17 at 14:46

I was doing nothing right, i wasn't importing the library which i was trying t use (jquery), and i wasn't referring to the correct variables.

Now it works and it is something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
   $(document).keydown(function(e){
     if(e.keyCode == 87) {
      e.preventDefault();
       window.location.href = document.getElementById('0').href.animVal;
     }
</script>

javascript keypress detection

1 Answers1