title: Making a working fighting system for enemies
body: <p>Trying to make a fight button that make enemy take damage. then it increases kill count for later making the button disabled until a certain amount of kills of a monster.
  <a href="https://jsfiddle.net/7nbvaszh/9/" rel="nofollow noreferrer">https://jsfiddle.net/7nbvaszh/9/</a>   my fiddle its the bottom part . i have the enemy and hp nicely stacked. I should also add that the player should lose hp equal to the enemy's damage on click to so basically fight button when rat is on 1 damage( this will be different made it one just to get it to work) so it should have 9 hp after first click and player should have 9 hp( u can make a variable for hp and make it 10 its 0 atm because i wanted hp unlocked later but just for testing purposes it can be added) </p>
  
  <p>My friend and i tried this but  its not working</p>
  
  <pre><code>var currentEnemyName;
   var currentEnemyHp;
  
  var hasEnemyToFight = false;
  
  var enemyNames = ["rat     ","slime   ","goblin  ","skeleton","zombie  ","succubus"]
  var enemyHps = [10,20,25,50,75,100]
  var enemyStrengths = [1,3,5,10,15,25]
  
  var currentItemIndex = 0;
  
  
    var ratKills = 0;
    var slimeKills = 0;
    var goblinKills = 0;
    var skeletonKills = 0;
    var zombieKills = 0;
    var succubusKills = 0;
    var Strength = 1;
  
    document.getElementById("enemyHp").innerHTML="";
    document.getElementById("enemyName").innerHTML="None";
  
   function spawnNewEnemy(enemyNum){
     currentEnemyName = enemyNames[enemyNum];
    currentEnemyHp = enemyHps[enemyNum];
  
    hasEnemyToFight = true;
  
    document.getElementById("enemyHp").innerHTML=currentEnemyHp;
    document.getElementById("enemyName").innerHTML=currentEnemyName;
    }
  
  
      function fight(){
  
   if(hasEnemyToFight == false){
   spawnNewEnemy(currentItemIndex)
   document.getElementById("enemyName").innerHTML=currentEnemyName+" appeared!";
   }
  
   else{
  
      if(currentEnemyHp &gt; 0){
          currentEnemyHp -= 1;
      document.getElementById("enemyHp").innerHTML=currentEnemyHp;
  
      if (currentEnemyHp &lt;=0){
          currentEnemyHp = 0;
          goldcoins += 10;
  
          hasEnemyToFight = false;
  
          if(enemyName == "rat"){
          ratKills++
          }
          else if(enemyName == "skeleton"){
          skeletonKills++
          }
  
  
          }
  }
  
      document.getElementById("enemyHp").innerHTML=currentEnemyHp;
      document.getElementById("enemyName").innerHTML=currentEnemyName;
      document.getElementById("goldcoins").innerHTML=goldCoins;
  
  
  }
  </code></pre>
  
  <p>Javascript for my working code:</p>
  
  <pre><code> function show() { 
      var enemy = enemyName[currentItemIndex];
      var enemyHitPoints = enemyHp[currentItemIndex];
  
  document.getElementById("enemyName").innerHTML=enemyName[currentItemIndex]
      document.getElementById("enemyHp").innerHTML=enemyHp[currentItemIndex]
      document.getElementById("previous").disabled=currentItemIndex&lt;=0;
  
  
  
  
     document.getElementById("next").disabled 
    =currentItemIndex&gt;=enemyName.length- 
    1;
  
  }
  
     var enemyName = ["rat     ","slime   ","goblin  ","skeleton","zombie  
  ","succubus"]
  var enemyHp = [10,20,25,50,75,100]
  var enemyStrength = [1,3,5,10,15,25]
  
  var currentItemIndex = 0;
  
  
  
  
  window.onload=function() {
    document.getElementById("previous").onclick=function() {
      currentItemIndex--;
      if (currentItemIndex&lt;=0) {
        currentItemIndex=0;
      }
      show();       
    }
    document.getElementById("next").onclick=function() {
      currentItemIndex++;
      if (currentItemIndex&gt;=enemyName.length-1) {
        currentItemIndex=enemyName.length-1;
      }
      show();       
    }
  
  
    var ratKills = 0;
    var slimeKills = 0;
    var goblinKills = 0;
    var skeletonKills = 0;
   var zombieKills = 0;
  var succubusKills = 0;
  var Strength = 1;
  
  
  function fight(){
      if(enemyName == "rat" &amp;&amp; enemyHp &gt; 0)
          enemyHp = enemyHp - Strength;
      document.getElementById("enemyHp").innerHTML=enemyHp;
      if (enemyHp &lt;=0)
          enemyHp = 0;
          goldcoins = goldcoins +10;
      document.getElementById("enemyHp").innerHTML=enemyHp;
      document.getElementById("goldcoins").innerHTML=enemyHp;
  
  
  }
  
  
  
  
  
  
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code> &lt;button onclick="fight()" id="Fightbtn" &gt;Fight&lt;/button&gt; &lt;span 
  id="enemyName"&gt;rat&lt;/span&gt;  &amp;nbsp; Hp:&lt;span id="enemyHp"&gt;10&lt;/span&gt;
                  &lt;body&gt;
  
   &lt;style&gt;
  a {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
  }
  
  a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .previous {
   background-color: #f1f1f1;
    color: black;
  }
  
  .next {
    background-color: #4CAF50;
    color: white;
  }
  
  .round {
    border-radius: 50%;
  }
  &lt;/style&gt;                   
  
  
  &lt;a href="#" id="previous" class="previous round"&gt;&amp;#8249;&lt;/a&gt;
  &lt;a href="#" id="next" class="next round"&gt;&amp;#8250;&lt;/a&gt;
  
          &lt;/body&gt;
  </code></pre>
  
  <p>I expect when you press the fight button for the enemys hp to go down by how much strength you have then once hp goes below 0 for 10 gold to be given then the enemy's hp to reset back to 10. but at the moment the fight button isnt doing anything and the enemy's hp is not going down. the players hp should also go down by 1 or whatever that enemys damage is. im sure there is a simple solution im missing to making my if statements work.</p>