make element clickable for javascript? -

i can't make work javascript. i'm making simple game, , there's blank <a> tags work actions in game. should clickable, , once it's clicked executes next part of game. however, doesn't anything. here's mean.

sample code

@import url(http://fonts.googleapis.com/css?family=chewy);  @import url(http://fonts.googleapis.com/css?family=special+elite);  html, body {     background: #20159e;     width: 800px;     height: 1000px;     box-shadow: inset 0px 0px 125px rgba(0, 0, 0, .5) } #wrap {     padding: 0;     margin: auto; } #container {     position: relative;     left: 50px;     top: 325px;     width: 600px;     height: 350px;     border: 10px solid #ffc130;     border-radius: 1px;     background: #bd2a2a; } #map { } #hud {     background: #fff;     box-shadow: inset 0px 0px 75px #bd2a2a;     position: relative;     left: 225px;     top: 25px; } #actions {     position: relative;     left: 150px;     top: 50px; } .action {     display: inline-block;     box-shadow: inset 0px 0px 50px rgba(0, 0, 0, .5);     width: 125px;     height: 30px;     line-height: 170%;     background: #fff;     border: 1px solid #000;     text-align: center;     margin-left: 15px; } #status {     margin-top: 25px; } .status {     display: inline;     font-family:"chewy", courier, arial;     line-height: 10%;     text-align: center;     padding: 2px; } .inventory {     display: inline-block;     position: relative;     bottom: 325px;     left: 400px;     background: url('http://www.thegaminghideout.com/img/index/mfg/inventory.jpg');     height: 60px;     width: 60px; } #storyline {     position: relative;     bottom: 450px;     left: 15px;     width: 135px;     max-height: 150px;     overflow: hidden; } 

html

<div id="wrap">     <div id="container">         <div id="user">             <div id="map">                 <canvas id="hud" width="150" height="150"></canvas>             </div>             <div id="actions"> <a class="action" data-id="0"></a>  <a class="action" data-id="1" tabindex="1"></a>                  <br> <a class="action" data-id="2"></a>  <a class="action" data-id="3"></a>              </div>             <div id="status"> <a class="status" data-id="0">l %lvl%</a>                  <br> <a class="status" data-id="1">%name%</a>                  <br> <a class="status" data-id="2">%rhp% / %thp%</a>                  <br> <a class="status" data-id="3">%rmp% / %tmp%</a>                  <br> <a class="status" data-id="4">%rxp / %txp%</a>                  <br>             </div>             <div id="inventory"> <a class="inventory" data-id="0"></a>  <a class="inventory" data-id="1"></a>  <a class="inventory" data-id="2"></a>                  <br> <a class="inventory" data-id="3"></a>  <a class="inventory" data-id="4"></a>  <a class="inventory" data-id="5"></a>              </div>             <div id="storyline">                 <p id="story">%storyline%</p>             </div>         </div>     </div> </div> 

js

var act_1 = document.queryselector('[data-id="0"].action'); var act_2 = document.queryselector('[data-id="1"].action'); var act_3 = document.queryselector('[data-id="2"].action'); var act_4 = document.queryselector('[data-id="3"].action'); var intro = function () {     rhp -= 12;     update();     story.innerhtml = "you wake in midst of battle. blasted away , blacked out temporarily. town fighting horde.";     act_1.innerhtml = "continue";     act_2.innerhtml = "null";     act_3.innerhtml = "null";     act_4.innerhtml = "null";     if(act_1.onclick)  {         story.innerhtml = "what do?";         act_1.innerhtml = "return battle";         act_2.innerhtml = "run";         act_3.innerhtml = "go infirmary";         act_4.innerhtml = "call help";         if(act_1.onclick)  {             story.innerhtml = "you run battle, blasted away again cannon. vision fades black.";             begin();         }         else if(act_2.onclick)  {             story.innerhtml = "you run away, cannon blast knocks on , ears ring. vision fades black.";             begin();         }         else if(act_3.onclick)  {             story.innerhtml = "you attempt run infirmary, cannon blast launches off feet. vision fades black.";             begin();         }         else  {             story.innerhtml = "you attempt call help. scream silent. vision fades black.";             begin();         }     } }; 

yes.

thats alot of code work with, here's breakdown. initial "intro" function called. 4 <a>s text set , go storyline , once clicked, executes function. however, does nothing.

events in javascript trigger callback functions. in order use callback function event, need attach function event on element. so, doing this:

if(act_1.onclick)  { 

is not doing anything. act_1.onclick going callback function assigned tot onclick event handler. there none, undefined, , result, if statement false , never executes. believe intended assign event handler here using callback function click event on act_1 element executes code in if statement. this:

/*if(act_1.onclick)  {*/ act_1.onclick = function(){     story.innerhtml = "what do?";     act_1.innerhtml = "return battle";     act_2.innerhtml = "run";     act_3.innerhtml = "go infirmary";     act_4.innerhtml = "call help"; };