Skill stats are changing in a weird way

94
March 15, 2022, at 10:20 AM

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 class="ability-record">
        <td><?php echo $showSkill['skill_name']; ?></td>
        <td class="skill-stat">0</td>
        <td class="skill-plus">
            <div class="stat-plus"><img src="images/plus.png" alt="Plus"></div>
            <td class="skill-minus">
                <div class="stat-minus"><img src="images/minus.png" alt="Minus"></div>
                <input type="hidden" name="skill-<?php echo $showSkill['id']; ?>" class="skill-item" value="0">
            </td>
        </td>
    </tr>
<?php
    }
?>
Answer 1

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 class="ability-record">
      <td>
        Skill 1
      </td>
      <td class="skill-stat">0</td>
      <td class="skill-plus">
        <div class="stat-plus"><img src="images/plus.png" alt="Plus"></div>
        <div class="stat-minus"><img src="images/minus.png" alt="Minus"></div>
        <input type="hidden" name="skill-skill-1" class="skill-item" value="0" />
      </td>
    </tr>
    <tr class="ability-record">
      <td>
        Skill 2
      </td>
      <td class="skill-stat">0</td>
      <td class="skill-plus">
        <div class="stat-plus"><img src="images/plus.png" alt="Plus"></div>
        <div class="stat-minus"><img src="images/minus.png" alt="Minus"></div>
        <input type="hidden" name="skill-skill-1" class="skill-item" value="0">
      </td>
    </tr>
  </tbody>
</table>
<span class="abilities"></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
Rent Charter Buses Company
READ ALSO
How to Get Element By Class in JavaScript?

How to Get Element By Class in JavaScript?

I want to replace the contents within a html element so I'm using the following function for that:

148
Loop through each div of containers and compare the height index wise

Loop through each div of containers and compare the height index wise

Really sorry if there is any mistake in typo for titleBut I need help in looping through 2 main divs and their child divs too

120
Javascript function waits until element shows

Javascript function waits until element shows

I want to write a function that will run when the "RUN TEST" button is pressedThis function is designed to hide the two buttons on the next page

128
Fullcalendar dayClick sends multiple ajax requests

Fullcalendar dayClick sends multiple ajax requests

I use Fullcalendar v3 with Djangoand I have an issue with dayClick

126