My problem: skill stats are changing in a weird way

1. They are changing in all fields not one.
2. The numbers are weird.
   Output is 1, 111112 and 1.111121111121111e 35, instead of 1, 2, 3, ...

My js code:

var skillcount = 15;

// Dodawanie umiejętności

$('.skill-plus div img').click(function() {
    if (skillcount > 0) {
        var new_skillstat = parseInt($('td.skill-plus').closest('.skill-stat').text(),0)   1;
        $('td.skill-plus').closest('.skill-stat').text(new_skillstat);
        $('.skill-item').val(new_skillstat);
        skillcount--;
        $('.abilities').text(skillcount);
        $('.register-abilities').val(skillcount);
    }
});

HTML:

<?php
    $showSkills = $databasecon->getSome('*', 'skills', 'skill_cat', 0);
    while($showSkill = mysqli_fetch_array($showSkills)) {
?>
    <tr >
        <td><?php echo $showSkill['skill_name']; ?></td>
        <td >0</td>
        <td >
            <div ><img src="images/plus.png" alt="Plus"></div>
            <td >
                <div ><img src="images/minus.png" alt="Minus"></div>
                <input type="hidden" name="skill-<?php echo $showSkill['id']; ?>"  value="0">
            </td>
        </td>
    </tr>

<?php
    }
?>

CodePudding user response：

It is a bit more complex than you thought

1. I delegate from the ability record
2. I do not allow to go negative on skill
3. Your HTML is invalid

var skillcount = 15;

// Dodawanie umiejętności

$('.ability-record img').on('click', function() {
  const $row = $(this).closest('tr');
  const skillValue = $(this).closest('div').is('.stat-plus') ? 1 : -1
  let new_skillstat =  $row.find('.skill-stat').text()   skillValue;
  if (new_skillstat < 0) return; // negative
  $row.find('.skill-stat').text(new_skillstat);
  $row.find('.skill-item').val(new_skillstat);
  skillcount  = skillValue * -1; // invert
  $('.abilities').text(skillcount);
  // $('.register-abilities').val(skillcount);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr >
      <td>
        Skill 1
      </td>
      <td >0</td>
      <td >
        <div ><img src="images/plus.png" alt="Plus"></div>

        <div ><img src="images/minus.png" alt="Minus"></div>
        <input type="hidden" name="skill-skill-1"  value="0" />
      </td>
    </tr>

    <tr >
      <td>
        Skill 2
      </td>
      <td >0</td>
      <td >
        <div ><img src="images/plus.png" alt="Plus"></div>
        <div ><img src="images/minus.png" alt="Minus"></div>
        <input type="hidden" name="skill-skill-1"  value="0">
      </td>
    </tr>

  </tbody>
</table>
<span ></span>

I wanted to stop when using too much skillCount but this did not work as I thought

const sum = $('.skill-stat')
.map(function() { return  this.textContent}) 
.get()
.reduce((a,b)=>a b)
if (skillcount-sum <= 0) return; // negative