使元素可点击的javascript吗？

Question

我无法针对我的JavaScript进行此操作。 我正在制作一个简单的游戏，并且有空白的<a>标签用作游戏中的动作。 它应该是可点击的，一旦被点击，它将执行游戏的下一部分。 但是，它什么也没做。 这就是我的意思。

样例代码

@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();
        }
    }
};

是。

可以使用很多代码，但这是细分。 最初的“介绍”功能被调用。 设置4个<a>文本，并与storyline一起使用，一旦单击，便执行功能。 但是， 它什么也没做 。

Answer 1

JavaScript中的事件触发回调函数。 为了对事件使用回调函数，您需要将该函数附加到该元素上的事件。 因此，这样做：

if(act_1.onclick)  {

基本上什么也没做。 act_1.onclick将查找分配给onclick事件处理程序的回调函数。 由于没有，它将是不确定的，因此，此if语句为false且从不执行。 我相信您打算在这里使用对act_1元素上的click事件的回调函数来分配事件处理程序，然后在if语句中执行代码。 看起来像这样：

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