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, does nothing.

Are you running the Javascript after the DOM is loaded, either by putting it at the end of the document or calling it in the window.onload function? — Barmar
– Barmar, Commented May 11, 2015 at 19:47
You'd get more help if you created a simpler jsfiddle or plunkr demonstrating the problem. That being said, I see no click handlers on your links. You probably want something like: act_1.on('click', function() { /* do something*/ }); — Tony
– Tony, Commented May 11, 2015 at 19:52
Nothing is being executed when you click. Your code checks for the existence of event handler, it doesn't actually set up an event handler. For example you should be doing act_1.onclick = function() { ... } instead of if(act_1.onclick) { ... } — Danny
– Danny, Commented May 11, 2015 at 19:53

Travis J · Accepted Answer · 2015-05-11 19:52:20Z

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";
};

Collectives™ on Stack Overflow

make element clickable for javascript?

sample code

html

js

YES.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

sample code

html

js

YES.

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related