make element clickable for javascript?

Question

I can't make this work for my JavaScript. I'm making a simple game, and there's blank <a> tags that work as actions in the game. It should be clickable, and once it's clicked it executes the next part of the game. It however, doesn't do anything. Here's what I 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 up in the midst of battle. You were blasted away and blacked out temporarily. Your town is fighting the 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 you do?";
        act_1.innerHTML = "Return to Battle";
        act_2.innerHTML = "Run";
        act_3.innerHTML = "Go to the infirmary";
        act_4.innerHTMl = "Call for help";
        if(act_1.onclick)  {
            story.innerHTML = "You run back into battle, but get blasted away again by a cannon. Your vision fades to black.";
            begin();
        }
        else if(act_2.onclick)  {
            story.innerHTML = "You run away, but a cannon blast knocks you over and your ears ring. Your vision fades to black.";
            begin();
        }
        else if(act_3.onclick)  {
            story.innerHTML = "You attempt to run to the infirmary, but a cannon blast launches you off your feet. Your vision fades to black.";
            begin();
        }
        else  {
            story.innerHTML = "You attempt to call for help. But your scream is silent. Your vision fades to black.";
            begin();
        }
    }
};

YES.

Thats alot of code to work with, but here's the breakdown. The initial "intro" function is called. The 4 <a> s text is set and go with the storyline and once clicked, executes a function. it however, . 。

Answer 1

Events in JavaScript trigger callback functions. In order to use a callback function for an event, you need to attach the function to the event on that element. So, doing this:

if(act_1.onclick)  {

Is basically not doing anything. act_1.onclick is going to look for a callback function assigned tot he onclick event handler. As there is none, it will be undefined, and as a result, this if statement is false and never executes. I believe what you intended was to assign an event handler here using a callback function for the click event on your act_1 element which then executes the code in the if statement. That would look like this:

/*if(act_1.onclick)  {*/
act_1.onclick = function(){
    story.innerHTML = "What do you do?";
    act_1.innerHTML = "Return to Battle";
    act_2.innerHTML = "Run";
    act_3.innerHTML = "Go to the infirmary";
    act_4.innerHTMl = "Call for help";
};