我无法为我的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;
}
<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>
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();
}
}
};
有很多代码可以使用，但这里有细分。最初的＆＃34;介绍＆＃34;函数被调用。设置4 <a>个文本并与storyline一起使用，一旦点击，就会执行一个函数。然而，什么都不做。
答案 0 :(得分：4)
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";
};