正常运行之前，不再需要在按下按钮时调用JS函数

时间：2018-09-26 07:27:32

标签： javascript html

好的，我要在这一点上使事情变得简单明了。我正在做一个游戏。我使用HTML创建了一个按钮，并将其onClick事件设置为我的JS函数，该函数每次单击将变量x递增1。

我一切正常。该函数被调用并执行，没有错误或问题，并且变量显示变化得很好。快进几个小时，我又去做一些工作，突然之间它不再调用该函数或正常工作。按下按钮后，它什么也不做。

现在，我感到难过的是，我没有任何方式来编辑，更改，添加或删除任何代码。当我完成工作时，它确实可以正常工作，而几个小时后回来时，它就停止了工作。

为什么从代码正常运行起就不会更改代码而停止调用该函数呢？

我制作了一个代码段，显示了我在正常工作时拥有的所有代码。这段代码中没有显示任何代码。

var PlayerExp = 0;
var NeededExp = 0;
var PlayerLevel = 0;
var PlayerGold = 0;

function SingleAttack() {
	if ( PlayerExp >= NeededExp ) {
		PlayerExp -= NeededExp;
		PlayerLevel += 1;
		PlayerExp += 13;
		NeededExp += 30;
		PlayerGold += 2;
		document.getElementById("PlayerExp").value = PlayerExp;
		document.getElementById("NeededExp").value = NeededExp;
		document.getElementById("PlayerLevel").value = PlayerLevel;
		document.getElementById("PlayerGold").value = PlayerGold;
	}
	else {
		PlayerExp += 13;
		PlayerGold += 2;
		document.getElementById("PlayerExp").value = PlayerExp;
		document.getElementById("PlayerGold").value = PlayerGold;
		  }
	}
#AttackButton {
	position: absolute;
	top: 20px;
	left: 500px;
	width: 75px;
	height: 25px;
	background-color: #505050;
	color: white;
	text-align: center;
	font-family: "Fira Sans";
	}
<!DOCTYPE html>
<html>
	<head>
	<script src="JavaCode.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,700,800,900" type="text/css" rel="StyleSheet">
	<link rel="StyleSheet" type="text/css" href="StyleSheet.css">
		<title>The Lost Runes - PBBG</title>
	</head>
		<body>
			<table id="PlayerStats">
				<tr>
					<td><strong>Name:</strong> Nisshoku</td>
					<td><strong>Level:</strong> <a id="PlayerLevel">1</a></td>
					<td><strong>Gold:</strong> <a id="PlayerGold">0</a></td>
					<td><strong>Rank:</strong> Peasant</td>
				<tr>
					<td><strong>Race:</strong> <a href="Human" style="text-decoration: none">Human </a>(1)</td>
					<td><strong>Exp:</strong> <a id="PlayerExp">0</a> / <a id="NeededExp">30</a></td>
					<td><strong>Platinum:</strong> 0</td>
					<td><strong>Credits:</strong> 0</td>
				<tr>
					<td><strong>Class:</strong> Brawler (1)</td>
					<td><strong>Clan:</strong> -</td>
					<td><strong>Diamonds:</strong> 0</td>
					<td><strong>Honor:</strong> 0</td>
			</table>
			
			<table id="KingdomStats">
				<tr>
					<td><strong>Ruler:</strong> -</td>
					<td><strong>Min. Essence:</strong> -</td>
					<td><strong>Minor Totem:</strong> -</td>
				<tr>
					<td><strong>Networth:</strong> -</td>
					<td><strong>Maj. Essence:</strong> -</td>
					<td><strong>Minor Totem:</strong> -</td>
				<tr>
					<td><strong>Workers:</strong> -</td>
					<td><strong>Gold:</strong> -</td>
					<td><strong>Major Totem:</strong> -</td>
				<tr>
					<td><strong>Soldiers:</strong> -</td>
					<td><strong>Tax:</strong> -%</td>
					<td><strong>Major Totem:</strong> -</td>
			</table>
			
			<div id="MapMoveBox">
			<p>Rune City<br>50, 50<p>
			<img src="MapCompass.png" id="MapCompass" alt="Compass">
			</div>
			
			<div id="MapInfoBox">
			<div id="MapInfoText"><p><strong>You see...</strong><br><em>Nothing</em></p></div>
			</div>
			
			<div id="AttributesBox">
				<select name="Attributes" id="AttributeDropdown">
					<option value="Attributes">Attributes</option>
				</select>
				
				<table id="AttributesTable">
					<tr>
						<td><strong>Health:</strong></td>
						<td><a id="HealthStat">0</a> / 500</td>
					<tr>
						<td><strong>Attack:</strong></td>
						<td>0 / 500</td>
					<tr>
						<td><strong>Defence:</strong></td>
						<td>0 / 500</td>
					<tr>
						<td><strong>Accuracy:</strong></td>
						<td>50% / 55.00%</td>
					<tr>
						<td><strong>Evasion:</strong></td>
						<td>0% / 5.00%</td>
					<tr>
						<td><strong>Luck:</strong></td>
						<td>0 / 500</td>
				</table>
			</div>
			
			<div id="ArmorBox">
				<select name="Equipment" id="EquipmentDropdown">
					<option value="EquippedItems">Equipped Items</option>
				</select>
				
				<table id="EquipmentTable">
					<tr>
						<td><strong>Weapon 1: </strong></td>
						<td>Weapon [<a href="">1<a/>]</td>
					<tr>
						<td><strong>Weapon 2: </strong></td>
						<td>Weapon [<a href="">1</a>]</td>
					<tr>
						<td><strong>Helm: </strong></td>
						<td>Armor 1 [<a href="">1</a>]</td>
					<tr>
						<td><Strong>Gloves: </strong></td>
						<td>Armor 2 [<a href="">1</a>]</td>
					<tr>
						<td><strong>Gauntlets: </strong></td>
						<td>Armor 3 [<a href="">1</a>]</td>
					<tr>
						<td><strong>Shoulders: </strong></td>
						<td>Armor 4 [<a href="">1</a>]</td>
					<tr>
						<td><strong>Torso: </strong></td>
						<td>Armor 5 [<a href="">1</a>]</td>
					<tr>
						<td><strong>Leggings: </strong></td>
						<td>Armor 6 [<a href="">1</a>]</td>
					<tr>
						<td><strong>Boots: </strong></td>
						<td>Armor 7 [<a href="">1</a>]</td>
				</table>
			</div>
			
			<div id="MainContent">
				<select name="Actions" id="ActionDropDown">
					<option value="Battle">Battle</option>
					<option value="Gather">Gather</option>
					<option value="Arena">Arena</option>
					<option value="Dungeons">Dungeons</option>
				</select>
				
				<select name="Monsters" id="MonsterDropDown">
					<option value="SewerRat">Sewer Rat</option>
					<option value="SewerBat">Sewer Bat</option>
				</select>

				<input type="button" value="Auto!" onClick="AutoAttack" id="AutoAttackButton">
				<input type="button" value="Attack!" id="AttackButton" onClick="SingleAttack()">
			</div>
		</body>
</html>

我对JS编程还是很陌生，所以也许是我不知道它停止工作的原因。如果可以找到解决方案，那将是很棒的，但是我真的在想为什么它首先停止工作。

4 个答案:

答案 0 :(得分：2)

所有应有的尊重，该代码从未奏效。 :-)如果“有效”是指单击按钮更改了PlayerExp元素和类似元素的外观。

a元素没有value属性（仅在input元素等上），因此分配给value不会执行任何操作。要更改a元素的内容，请使用其innerHTML或innerText属性（或通过DOM methods创建和附加元素，等等）。在某些时候，您必须将那些元素从input元素更改为a元素或类似元素。很容易忘记进行了这样的更改。

以下是使用innerHTML的代码：

var PlayerExp = 0;
var NeededExp = 0;
var PlayerLevel = 0;
var PlayerGold = 0;

function SingleAttack() {
	if ( PlayerExp >= NeededExp ) {
		PlayerExp -= NeededExp;
		PlayerLevel += 1;
		PlayerExp += 13;
		NeededExp += 30;
		PlayerGold += 2;
		document.getElementById("PlayerExp").innerHTML = PlayerExp;
		document.getElementById("NeededExp").innerHTML = NeededExp;
		document.getElementById("PlayerLevel").innerHTML = PlayerLevel;
		document.getElementById("PlayerGold").innerHTML = PlayerGold;
	}
	else {
		PlayerExp += 13;
		PlayerGold += 2;
		document.getElementById("PlayerExp").innerHTML = PlayerExp;
		document.getElementById("PlayerGold").innerHTML = PlayerGold;
		  }
	}
#AttackButton {
	position: absolute;
	top: 20px;
	left: 500px;
	width: 75px;
	height: 25px;
	background-color: #505050;
	color: white;
	text-align: center;
	font-family: "Fira Sans";
	}
<!DOCTYPE html>
<html>
	<head>
	<script src="JavaCode.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,700,800,900" type="text/css" rel="StyleSheet">
	<link rel="StyleSheet" type="text/css" href="StyleSheet.css">
		<title>The Lost Runes - PBBG</title>
	</head>
		<body>
			<table id="PlayerStats">
				<tr>
					<td><strong>Name:</strong> Nisshoku</td>
					<td><strong>Level:</strong> <a id="PlayerLevel">1</a></td>
					<td><strong>Gold:</strong> <a id="PlayerGold">0</a></td>
					<td><strong>Rank:</strong> Peasant</td>
				<tr>
					<td><strong>Race:</strong> <a href="Human" style="text-decoration: none">Human </a>(1)</td>
					<td><strong>Exp:</strong> <a id="PlayerExp">0</a> / <a id="NeededExp">30</a></td>
					<td><strong>Platinum:</strong> 0</td>
					<td><strong>Credits:</strong> 0</td>
				<tr>
					<td><strong>Class:</strong> Brawler (1)</td>
					<td><strong>Clan:</strong> -</td>
					<td><strong>Diamonds:</strong> 0</td>
					<td><strong>Honor:</strong> 0</td>
			</table>
			
			<table id="KingdomStats">
				<tr>
					<td><strong>Ruler:</strong> -</td>
					<td><strong>Min. Essence:</strong> -</td>
					<td><strong>Minor Totem:</strong> -</td>
				<tr>
					<td><strong>Networth:</strong> -</td>
					<td><strong>Maj. Essence:</strong> -</td>
					<td><strong>Minor Totem:</strong> -</td>
				<tr>
					<td><strong>Workers:</strong> -</td>
					<td><strong>Gold:</strong> -</td>
					<td><strong>Major Totem:</strong> -</td>
				<tr>
					<td><strong>Soldiers:</strong> -</td>
					<td><strong>Tax:</strong> -%</td>
					<td><strong>Major Totem:</strong> -</td>
			</table>
			
			<div id="MapMoveBox">
			<p>Rune City<br>50, 50<p>
			<img src="MapCompass.png" id="MapCompass" alt="Compass">
			</div>
			
			<div id="MapInfoBox">
			<div id="MapInfoText"><p><strong>You see...</strong><br><em>Nothing</em></p></div>
			</div>
			
			<div id="AttributesBox">
				<select name="Attributes" id="AttributeDropdown">
					<option value="Attributes">Attributes</option>
				</select>
				
				<table id="AttributesTable">
					<tr>
						<td><strong>Health:</strong></td>
						<td><a id="HealthStat">0</a> / 500</td>
					<tr>
						<td><strong>Attack:</strong></td>
						<td>0 / 500</td>
					<tr>
						<td><strong>Defence:</strong></td>
						<td>0 / 500</td>
					<tr>
						<td><strong>Accuracy:</strong></td>
						<td>50% / 55.00%</td>
					<tr>
						<td><strong>Evasion:</strong></td>
						<td>0% / 5.00%</td>
					<tr>
						<td><strong>Luck:</strong></td>
						<td>0 / 500</td>
				</table>
			</div>
			
			<div id="ArmorBox">
				<select name="Equipment" id="EquipmentDropdown">
					<option value="EquippedItems">Equipped Items</option>
				</select>
				
				<table id="EquipmentTable">
					<tr>
						<td><strong>Weapon 1: </strong></td>
						<td>Weapon [<a href="">1<a/>]</td>
					<tr>
						<td><strong>Weapon 2: </strong></td>
						<td>Weapon [<a href="">1</a>]</td>
					<tr>
						<td><strong>Helm: </strong></td>
						<td>Armor 1 [<a href="">1</a>]</td>
					<tr>
						<td><Strong>Gloves: </strong></td>
						<td>Armor 2 [<a href="">1</a>]</td>
					<tr>
						<td><strong>Gauntlets: </strong></td>
						<td>Armor 3 [<a href="">1</a>]</td>
					<tr>
						<td><strong>Shoulders: </strong></td>
						<td>Armor 4 [<a href="">1</a>]</td>
					<tr>
						<td><strong>Torso: </strong></td>
						<td>Armor 5 [<a href="">1</a>]</td>
					<tr>
						<td><strong>Leggings: </strong></td>
						<td>Armor 6 [<a href="">1</a>]</td>
					<tr>
						<td><strong>Boots: </strong></td>
						<td>Armor 7 [<a href="">1</a>]</td>
				</table>
			</div>
			
			<div id="MainContent">
				<select name="Actions" id="ActionDropDown">
					<option value="Battle">Battle</option>
					<option value="Gather">Gather</option>
					<option value="Arena">Arena</option>
					<option value="Dungeons">Dungeons</option>
				</select>
				
				<select name="Monsters" id="MonsterDropDown">
					<option value="SewerRat">Sewer Rat</option>
					<option value="SewerBat">Sewer Bat</option>
				</select>

				<input type="button" value="Auto!" onClick="AutoAttack" id="AutoAttackButton">
				<input type="button" value="Attack!" id="AttackButton" onClick="SingleAttack()">
			</div>
		</body>
</html>

另外，还有Shubham Singh pointed out问题，您错过了()：

<input type="button" value="Auto!" onClick="AutoAttack" id="AutoAttackButton">
<!-- Here --------------------------------------------^              -->

不过，我建议阅读addEventListener，而不要使用onxyz属性型事件处理程序。

答案 1 :(得分：1)

我认为您在输入标签自动攻击中犯了错误，应该像onClick =“ AutoAttack（）”  您忘记在自动攻击输入标签中赋予（）功能符号

答案 2 :(得分：0)

I have included the image for the proof. I checked your code is working fine. No code issue.

答案 3 :(得分：-1)

您可以使用提示来了解将来是否会起作用：

  • 请在alert()的开头添加console.log()或SingleAttack()输出命令，以查看该功能是否甚至在单击按钮时执行。
  • 您可以通过在每个变量之后使用与console.log(any variable)相同的输出命令来检查函数或代码是否卡在某个地方，以查看是否已找到并更改了变量。
  • 此外，如果代码变大，则将其拆分为不同的文件并在<head>部分中引用它们会更容易。这样，它们变得更易于管理，您可以从那里轻松地将带有事件的任何函数附加到任何HTML元素。
相关问题
最新问题