Alright, so I am gonna make it clear and simple on this one. I am making an idle game. I created a button using HTML and set its onClick event to my JS function that increments variable x by 1 with each click. 

I had everything working just fine. The function was being called and executed without error or problems, and the variable display was changing just fine. Fast forward a few hours, I came back to work on it some more, and all of a sudden it no longer calls the function, or works properly. When the button is pressed, it does nothing at all.

Now what has me stumped is that I have not in any way, edited, changed, added, or removed any code whatsoever. It literally was working when I finished working on it, and when I came back a few hours later it stopped working.

Any reason on why a function would just stop being called when the code wasn't changed from when it was working perfectly?

I've made a code snippet showing all the code that I had when it was working just fine. None of this code has been changed from what is shown in this snippet.

```js
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;
    }
 }
```

```css
#AttackButton {
 position: absolute;
 top: 20px;
 left: 500px;
 width: 75px;
 height: 25px;
 background-color: #505050;
 color: white;
 text-align: center;
 font-family: "Fira Sans";
 }
```

```html
<!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>
```

I am still pretty new to JS programming, so maybe there is a reason it stopped working that I am not aware of. If a solution can be found that would be fantastic, but I am really looking as to why it stops working in the first place.