使元素可點擊的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";
};